ahourewitz · JSchoreels · Aug 22, 2022 · Aug 22, 2022 · Aug 22, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/.name b/.idea/.name
diff --git a/.idea/infinitymath.iml b/.idea/infinitymath.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/articles/grade6/20220821.grade6.intro.html b/articles/grade6/20220821.grade6.intro.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="../../main.css">
+    <script src="../../main.js"></script>
+    <meta charset="UTF-8">
+    <title>Infinity Math</title>
+    <link rel="icon" href="../../img/logo.png">
+    <script src="../../jquery-3.6.0.min.js"></script>
+    <script>
+        $(function(){
+            $("#includedContent").load("headline.html");
+        });
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+<body>
+<div id="includedContent"></div>
+<h3>Grade 6 Intro</h3>
+<p>
+    Intro
+</p>
+<footer>
+    <h1>
+        Copyright &copy; 2022 by Infinity Math. All Rights Reserved.
+    </h1>
+</footer>
+</body>
+</html>
+
diff --git a/articles/grade6/20220821.grade6.intro.jpeg b/articles/grade6/20220821.grade6.intro.jpeg
diff --git a/articles/grade6/20220822.grade6.intro2.html b/articles/grade6/20220822.grade6.intro2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="../../main.css">
+    <script src="../../main.js"></script>
+    <meta charset="UTF-8">
+    <title>Infinity Math</title>
+    <link rel="icon" href="../../img/logo.png">
+    <script src="../../jquery-3.6.0.min.js"></script>
+    <script>
+        $(function(){
+            $("#includedContent").load("headline.html");
+        });
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+<body>
+<div id="includedContent"></div>
+<h3>Grade 6 Intro 2</h3>
+<p>
+    Intro 2
+</p>
+<footer>
+    <h1>
+        Copyright &copy; 2022 by Infinity Math. All Rights Reserved.
+    </h1>
+</footer>
+</body>
+</html>
+
diff --git a/articles/grade6/20220822.grade6.intro2.jpeg b/articles/grade6/20220822.grade6.intro2.jpeg
diff --git a/articles/grade6/headline.html b/articles/grade6/headline.html
@@ -0,0 +1,53 @@
+<div style="text-align: center">
+    <img src="../../img/title1.jpeg" width="60%">
+</div>
+<div style="text-align: right">
+    <a href="https://www.facebook.com"><img src="../../img/facebook.png" width="30"></a>
+    <a href="https://www.in.com"><img src="../../img/instagram.png" width="30"></a>
+    <a href="https://www.pin.com"><img src="../../img/pinterest.png" width="30"></a>
+    <a href="https://www.you.com"><img src="../../img/youtube.png" width="30"></a>
+</div>
+    <nav>
+        <ul>
+            <li>
+                <a href="../../index.html">
+                    HOME
+                </a>
+            </li>
+            <li class="menu-deroulant">
+                <a href="#">
+                    MIDDLE SCHOOL
+                </a>
+                <ul class="sous-menu">
+                    <li><a href="../../grade6.html">Grade 6</a> </li>
+                    <li><a href="../../grade7.html">Grade 7</a> </li>
+                    <li><a href="../../grade8.html">Grade 8</a> </li>
+                </ul>
+            </li>
+            <li>
+                <a href="../../teacherpaper.html">
+                    TEACHER PAPER
+                </a>
+            </li>
+            <li>
+                <a href="../../digital.html">
+                    DIGITAL
+                </a>
+            </li>
+            <li onclick="OpenModal()">
+                <a href="#">
+                    NEWSLETTER
+                </a>
+            </li>
+        </ul>
+    </nav>
+<div class="overlay" id="overlay">
+    <div class="popup" id="popup">
+        <div onclick="CloseModal()" class="CloseIcon">&#10006;</div>
+        <h3>Want to subscribe to the newsletter ?</h3>
+        <input placeholder="Email Address">
+        <button>Sign up for more !</button>
+        <br>
+        <img src="../../img/facebook.png">
+    </div>
+</div>
diff --git a/grade6.html b/grade6.html
@@ -18,9 +18,7 @@
 <body>
   <div id="includedContent"></div>
   <h3>Grade 6</h3>
-  <p>
-    Welcome 5!
-  </p>
+  <script>loadArticles('grade6', ['20220821.grade6.intro', '20220822.grade6.intro2'])</script>
   <footer>
     <h1>
       Copyright &copy; 2022 by Infinity Math. All Rights Reserved.

diff --git a/main.css b/main.css
@@ -153,5 +153,15 @@ div#box1 div.Article-Home div.rightbox{
 .CloseIcon{
     cursor: pointer;
 }
-
-
+.article_poster{
+    width: 100%;
+    /*height: 100%;*/
+    /*margin: 0 auto;*/
+    /*text-align: right;*/
+    /*display: block;*/
+}
+.article_table{
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+}
diff --git a/main.js b/main.js
@@ -4,15 +4,52 @@ function OpenModal() {
     let popup_element = document.getElementById('popup')
     popup_element.style.animation = 'popup_move_in 1s'
 }
+
 function CloseModal() {
     let popup_element = document.getElementById('popup')
     popup_element.style.animation = 'popup_move_out 1s'
+
     function delay(time) {
         return new Promise(resolve => setTimeout(resolve, time));
     }
+
     delay(800).then(() => {
         let element = document.getElementById('overlay')
         element.style.display = 'none';
     });
 
+}
+
+function loadArticles(category, articles) {
+    let col_max = 3
+    const body = document.body,
+        tbl = document.createElement('table');
+    tbl.className = 'article_table'
+    outer: for (let i = 0; i < 100; i++) {
+        const tr = tbl.insertRow();
+        for (let j = 0; j < col_max; j++) {
+            const td = tr.insertCell();
+            td.style.width = 100/col_max + '%'
+            if (i * col_max + j >= articles.length) {
+                break outer
+            }
+            td.appendChild(
+                createArticleCard('articles/'+category+'/'+articles[i * col_max + j])
+            );
+        }
+    }
+    body.appendChild(tbl);
+}
+
+function createArticleCard(filename){
+    let cardElement = document.createElement('div');
+    cardElement.className = 'article_card'
+    let imgElement = document.createElement('img')
+    imgElement.src = filename + '.jpeg'
+    imgElement.className = 'article_poster'
+    let aElement = document.createElement('a')
+    aElement.href = filename + '.html'
+    cardElement.appendChild(aElement)
+    aElement.appendChild(imgElement)
+    return cardElement
 }