[DEV] mise en place du système d'onglet

Amiralgaby · Mar 7, 2021 · 732f440 · 732f440
1 parent c885c8d
commit 732f440
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 2 deletions.
diff --git a/tp3/dist/css/style.css b/tp3/dist/css/style.css
@@ -0,0 +1,9 @@
+.onglet {
+display:block;
+text-align:center;
+vertical-align:middle;
+font-family: Calibri;
+font-size: 20px;
+color:black;
+text-decoration:none;
+}
diff --git a/tp3/dist/js/main.js b/tp3/dist/js/main.js
@@ -26,3 +26,55 @@ articles.forEach(function(element){
 	let a = new Article(element.id, element.title, element.description);
 	a.addArticle();
 });
+
+var today = new Date();
+var dd = String(today.getDate()).padStart(2,'0');
+var mm = String(today.getMonth() + 1).padStart(2,'0');
+var yyyy = today.getFullYear();
+
+today = yyyy + '-' + dd + '-' +mm;
+today = '2021-03-03';
+console.log(today);
+
+$.ajax({
+    url: 'http://newsapi.org/v2/everything?q=minecraft&from='+ today +'&sortBy=publishedAt&apiKey=9b4e42c6404c48cab0f04cb200654d6c&pageSize=5',
+    type: 'GET',
+    dataType: 'jsonp',
+	cors: true ,
+	contentType:'application/json',
+	secure: true,
+	headers: {
+    	'Access-Control-Allow-Origin': '*',
+	},
+	beforeSend: function (xhr) {
+   		xhr.setRequestHeader ("Authorization", "Basic " + btoa(""));	
+	}
+}).done(function (data){
+	console.log(true);
+	console.log(data);
+
+	data.each(function(index,element){
+		let article = new Article(0, element.title.val(), element.desc.val());
+		article.addArticle();
+	});
+}).fail(function (data){
+	console.log(false);
+	console.log("l'appel ajax n'a pas fonctionné");
+});
+
+let onglets = $('.onglet');
+
+$(onglets[0]).click(function() {
+	$('form').hide().siblings(':not(form)').show();
+}).focus(function() {
+	$( this ).css('color',ROUGE);
+	$( onglets[1] ).css('color','#000000');
+});
+
+$(onglets[1]).click(function() {
+	$('form').show().siblings(':not(form)').hide();
+	$('table').show();
+}).focus(function() {
+	$( this ).css('color',ROUGE);
+	$( onglets[0] ).css('color','#000000');
+});
diff --git a/tp3/view/index.html b/tp3/view/index.html
@@ -4,12 +4,22 @@
 		<meta charset="utf-8"/>
 		<title>News</title>
 		<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+		<link href="../dist/css/style.css" rel="stylesheet">
 	</head>
 
 	<body>
+		<table>
+			<tr>
+				<td><button class="onglet list_rech">Article & Recherche</button></td>
+				<td><button class="onglet add_art">Ajouter un article</button></td>
+			</tr>
+		</table>
 
 		<h1> TP3 JS </h1>
 
+		<input type="search" id="site-search" name="q" aria-label="Search through site content">
+		<button style="font-family: Calibri">Rechercher</button>
+
 		<section id="news">
 			<h2 id="titleNews"></h2>
 			<article id="1">
@@ -21,13 +31,13 @@ <h3 class="title">News 1</h3>
 			<article id="2">
 				<h3 class="title">News 2</h3>
 				<p>Ma super news 2</p>
-				<button>View detail</button>
+				<button class="viewDetail">View detail</button>
 			</article>
 
 			<article id="3">
 				<h3 class="title">News 3</h3>
 				<p>Ma super news 3</p>
-				<button>View detail</button>
+				<button class="viewDetail">View detail</button>
 			</article>
 		</section>