attempted day 21 exercises

1 year ago · a8aa38f620
parent 4cddf2e3d4
commit a8aa38f620
6 changed files with 85 additions and 5 deletions
--- a/22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html
+++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_1/index.html
@ -3,13 +3,14 @@

 <head>
 	<title>30DaysOfJavaScript:22 Day: Number Generator </title>
+	<link rel="stylesheet" href="styles.css">
 </head>

 <body>
 	<h1>Number Generator</h1>
 	<h2>30DaysOfJavaScript:DOM Day 2</h2>
 	<h3>Author: Asabeneh Yetayeh</h3>
-	<div class="wrapper">
+	<div id="number-container">

 	</div>

--- a/22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js
+++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_1/scripts/main.js
@ -1,2 +1,38 @@
-console.log(countries)
-alert('Open the console and check if the countries has been loaded')
+// function to check if number is prime
+function isPrime(num) {
+    if (num <= 1) return false;
+    if (num <= 3) return true;
+    if (num % 2 === 0 || num % 3 === 0) return false;
+    let i = 5;
+    while (i * i <= num) {
+        if (num % i === 0 || num % (i + 2) === 0) return false;
+        i += 6;
+    }
+    return true;
+}
+
+// Get the container div
+const container = document.getElementById("number-container");
+
+
+// Loop to generate numbers from 1 to 100
+for (let i = 0; i <= 100; i++) {
+    const numberDiv = document.createElement("div");
+    numberDiv.textContent = i;
+    numberDiv.classList.add("number");
+
+    if (i % 2 === 0) {
+        numberDiv.classList.add("even");
+    } else {
+        numberDiv.classList.add("odd");
+    }
+
+    if (isPrime(i)) {
+        numberDiv.classList.add("prime");
+    }
+
+    container.appendChild(numberDiv);
+}
+
+
+
--- a/22_Day_Manipulating_DOM_object/22_day_starters/project_1/styles.css
+++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_1/styles.css
@ -0,0 +1,21 @@
+.number {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    font-size: 18px;
+    margin: 5px;
+    line-height: 30px;
+}
+
+.even {
+    background-color: green;
+}
+
+.odd {
+    background-color: yellow;
+}
+
+.prime {
+    background-color: red;
+}
--- a/22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html
+++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_2/index.html
@ -3,6 +3,7 @@

 <head>
 	<title>30DaysOfJavaScript:22 Day: World Countries List</title>
+	<link rel="stylesheet" href="styles.css">
 </head>

 <body>
@ -15,7 +16,7 @@

 	</header>

-	<div class="countries-container">
+	<div class="countries-container" id="countries-container">
 		<div class="countries-wrapper">

 		</div>
@ -23,6 +24,7 @@

 	<script src="./data/countries.js"></script>
 	<script src="./js/script.js"></script>
+	<script src="./scripts/main.js"></script>

 </body>

--- a/22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js
+++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_2/scripts/main.js
@ -1 +1,9 @@
-console.log(countries)
+const countryContainer = document.getElementById("country-container");
+
+// Loop through the array and create a box for each country
+countries.forEach(country => {
+    const countryBox = document.createElement("div");
+    countryBox.textContent = country;
+    countryBox.classList.add("country-box");
+    countryContainer.appendChild(countryBox);
+});
--- a/22_Day_Manipulating_DOM_object/22_day_starters/project_2/styles.css
+++ b/22_Day_Manipulating_DOM_object/22_day_starters/project_2/styles.css
@ -0,0 +1,12 @@
+/* Style for country boxes */
+.country-box {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    border: 1px solid #ccc;
+    text-align: center;
+    line-height: 100px;
+    margin: 5px;
+    font-size: 14px;
+    background-color: #f0f0f0;
+}