diff --git a/README.md b/README.md index 2d3e90b..edd911a 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,19 @@ # NASA Space Apps Noida Hackathon 2023 - Hack2Skill -Welcome to the official repository for the NASA Space Apps Noida Hackathon 2023 organized by Hack2Skill! +#### Team Name - Coding Triad +#### Problem Statement - Eclipse - Perspective is Everything +#### Team Leader Email - shantanutiwari240704@gmail.com -## Getting Started - -To get started with the NASA Space Apps Noida Hackathon 2023 repository, follow these steps: - -### Submission Instruction: - 1. Fork this repository - 2. Create a folder with your Team Name - 3. Upload all the code and necessary files in the created folder - 4. Upload a **README.md** file in your folder with the below mentioned informations. - 5. Generate a Pull Request with your Team Name. (Example: submission-XYZ_team) - -### README.md must consist of the following information: - -#### Team Name - -#### Problem Statement - -#### Team Leader Email - - -### A Brief of the Prototype: - This section must include UML Diagrams and prototype description +### A Brief of the Prototype: We made an interactive website that depicts the phenomena of Eclipse and how it occurs. We included an interactive quiz, stories and history with some mythological references. We also made sure to include safety measures and concerns people should have. We will be taking this as our personal project and developing it further on our githup repo. ### Tech Stack: - List Down all technologies used to Build the prototype + HTML, CSS, Javascript ### Step-by-Step Code Execution Instructions: - This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed + 1. Fork this repository + 2. Use git bash to clone this on your local machine + 3. Run it using an ide or a code editor ### Future Scope: - Write about the scalability and futuristic aspects of the prototype developed + We are considering adding affiliate links for safety equipments and we are going to start a newsletter regarding the moon and its science. + I think we can have a good scalability if we handle it well and give it the right direction. diff --git a/Style.css b/Style.css new file mode 100644 index 0000000..d89abd2 --- /dev/null +++ b/Style.css @@ -0,0 +1,119 @@ +body { + background-color: black; + overflow-y: scroll; + margin: 0; + background-image: url("background.jpg"); + background-attachment: fixed; + background-size: 100% 100%; +} +.logo-image{ + img{float: left} + width: 46px; + height: 46px; + border-radius: 50%; + overflow: hidden; + margin-top: 0px; +} +h1 { + color: white; + font-size: 200px; + font-family: "Space Mono", monospace; + text-align: center; + position: relative; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +.navbar { + background: Gray; + font-family: calibri; + padding-right: 15px; + padding-left: 15px; + position: fixed; + top: 0; + z-index: 100; +} + +.navdiv { + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo a { + font-size: 35px; + font-weight: 600; + color: white; +} + +li { + list-style: none; + display: inline-block; +} + +li a { + color: white; + font-size: 18px; + font-weight: bold; + margin-right: 25px; + margin-left: 10px; + border-radius: 10px; + padding: 10px; + width: 90px; +} + +button { + background-color: white; + margin-left: 10px; + border-radius: 10px; + padding: 10px; + width: 90px; +} + +button a { + color: white; + font-weight: bold; + font-size: 15px; +} + +.footer { + width: 100%; + height: 80px; + background-color: white; + text-align: center; + padding: 20px 0; +} + +main { + margin-top: 57px; /* Adjust this margin to avoid content being hidden under the header */ +} +p{ + color: #dddddd; +} +.collapsible { + background-color: #444444; + color: #dddddd; + cursor: pointer; + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; + +} + +.active, .collapsible:hover { + background-color: #ccc; +} + +.content { + padding: 0 18px; + display: none; + overflow: hidden; + background-color: #f1f1f1; +} +h2{ + background-color: #dddddd; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..da05b06 --- /dev/null +++ b/index.html @@ -0,0 +1,106 @@ + + + + + + + WikiEclipse + + + + + +

+

+ +
+
+ +
+

WikiEclipse

+
+
+
+

To know more about the cultural impact and general knowledge about the eclipse, visit this site

+ +
+ + + + diff --git a/quiz.css b/quiz.css new file mode 100644 index 0000000..f4f0907 --- /dev/null +++ b/quiz.css @@ -0,0 +1,75 @@ +*{ + margin : 0; + padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} + +body{ + background-color: #001e4d; +} +.app{ + background: #fff; + width: 90%; + max-width: 600px; + margin: 100px auto 0; + border-radius: 10px; + padding: 30px; +} +.app h1{ + font-size: 25px; + font-weight: 600; + color: #001e4d; + border-bottom: 1px solid #333; + padding-bottom: 30px; +} +.quiz{ + padding: 20px 0; +} +.quiz h2{ + font-size: 18px; + color: #001e4d; + font-weight: 600; +} +.btn{ + background: #fff; + color: #222; + font-weight: 500; + width: 100%; + border: 1px solid #222; + padding: 10px; + margin: 10px 0; + text-align: left; + border-radius: 4px; + cursor: pointer; + transition: all; +} +.btn:hover:not([disabled]){ + background: #222; + color: #fff; +} +.btn:disabled{ + cursor: no-drop; +} +#next-btn{ + background: #001e4d; + color: #fff; + font-weight: 500; + width: 150px; + border: 0; + padding: 10px; + margin: 20px auto 0; + border-radius: 4px; + cursor: pointer; + display: none; +} +.correct{ + background: #9aeabc; +} +.incorrect{ + background: #ff9393; +} +p { + background-image: url("eclipse-solar-eclipse.gif"); +} + diff --git a/quiz.html b/quiz.html new file mode 100644 index 0000000..7fe0aa8 --- /dev/null +++ b/quiz.html @@ -0,0 +1,30 @@ + + + + + + QUIZ + + + + +
+

Eclipse Quiz

+
+

Question goes here

+
+ + + + +
+ +
+
+ + + diff --git a/quiz.js b/quiz.js new file mode 100644 index 0000000..2a54dcd --- /dev/null +++ b/quiz.js @@ -0,0 +1,173 @@ +const questions = [ + { + question: "How many types of Lunar eclipses are there?", + answers: [ + {text: "6", correct: false}, + {text: "3", correct: true}, + {text: "5", correct: false}, + {text: "2", correct: false}, + ] + }, + { + question: "Which eclipse is NOT safe to watch with the naked eye?", + answers: [ + {text: "Lunar eclipse", correct: false}, + {text: "Solar eclipse", correct: true}, + ] + }, + { + question: "How often do solar eclipses occur?", + answers: [ + {text: "1-6 times a year", correct: false}, + {text: "5-10 times a year", correct: false}, + {text: "2-5 times a year", correct: false}, + {text: "once a year", correct: false}, + ] + }, + { + question: "In an eclipse where the Moon, Sun, and Earth are involved, they are nearly in a", + answers: [ + {text: "Polygon shape", correct: false}, + {text: "Oval shape", correct: false}, + {text: "Circular shape", correct: false}, + {text: "Straight line", correct: true}, + ] + }, + { + question: "______ takes place when the Earth intersects the umbra portion of the Moon’s shadow.", + answers: [ + {text: "Total solar eclipse", correct: true}, + {text: "Partial solar eclipse", correct: false}, + {text: "Total lunar eclipse", correct: false}, + {text: "Partial lunar eclipse", correct: false}, + ] + }, + { + question: "Which is the most rarest Solar Eclipse?", + answers: [ + {text: "Partial solar eclipse", correct: true}, + {text: "Annular solar eclipse", correct: false}, + {text: "Total solar eclipse", correct: false}, + {text: "Hybrid solar eclipse", correct: false}, + ] + }, + { + question: "How many types of solar eclipses are there?", + answers: [ + {text: "5", correct: false}, + {text: "4", correct: true}, + {text: "6", correct: false}, + {text: "3", correct: false}, + ] + }, + { + question: "A lunar eclipse occurs when the ______ shadow falls on the Moon.", + answers: [ + {text: "Mercury's", correct: false}, + {text: "Asteriod's", correct: false}, + {text: "Earth's", correct: true}, + {text: "Sun's", correct: false}, + ] + }, + { + question: "How many types of eclipses are there?", + answers: [ + {text: "4", correct: false}, + {text: "6", correct: false}, + {text: "5", correct: false}, + {text: "2", correct: true}, + ] + }, + { + question: "Choose the correct alignment during a solar eclipse from the options provided below:", + answers: [ + {text: "Sun, Moon, Earth", correct: true}, + {text: "Moon, Earth, Sun", correct: false}, + {text: "Sun,Earth, Moon", correct: false}, + {text: "Earth, Moon, Sun", correct: false}, + ] + } +]; +const questionElement = document.getElementById("question"); +const answerButton = document.getElementById("answer-buttons"); +const nextButton = document.getElementById("next-btn"); + +let currentQuestionIndex = 0; +let Score = 0; + +function startQuiz(){ + currentQuestionIndex = 0; + score = 0; + nextButton.innerHTML = "Next"; + showQuestion(); +} + +function showQuestion(){ + resetState(); + let currentQuestion = questions[currentQuestionIndex]; + let questionNo = currentQuestionIndex + 1; + questionElement.innerHTML = questionNo + "." + currentQuestion. + question; + + currentQuestion.answers.forEach(answer => { + const button = document.createElement("button"); + button.innerHTML = answer.text; + button.classList.add("btn"); + answerButton.appendChild(button); + if (answer.correct){ + button.dataset.correct = answer.correct; + } + button.addEventListener("click",selectAnswer); + + }); +} +function resetState(){ + nextButton.style.display = "none"; + while (answerButton.firstChild){ + answerButton.removeChild(answerButton.firstChild); + } +} + +function selectAnswer(e){ + const selectionBtn = e.target; + const isCorrect = selectionBtn.dataset.correct === "true"; + if (isCorrect){ + selectionBtn.classList.add("correct"); + score++; + }else { + selectionBtn.classList.add("incorrect"); + } + Array.from(answerButton.children).forEach(button =>{ + if (button.dataset.correct === "true"){ + button.classList.add("correct"); + } + button.disabled = true; + }); + nextButton.style.display = "block"; +} + +function showScore(){ + resetState(); + questionElement.innerHTML = `You scored ${score} out of ${questions.length}!`; + nextButton.innerHTML = "Play Again"; + nextButton.style.display = "block"; +} + +function handleNextButton(){ + currentQuestionIndex++; + if (currentQuestionIndex < questions.length){ + showQuestion(); + }else{ + showScore(); + } +} + +nextButton.addEventListener("click", ()=>{ + if (currentQuestionIndex < questions.length){ + handleNextButton(); + }else{ + startQuiz(); + } +}) + +startQuiz(); diff --git a/script.js b/script.js new file mode 100644 index 0000000..70d5624 --- /dev/null +++ b/script.js @@ -0,0 +1,96 @@ +const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + +let interval = null; + +document.querySelector("h1").onmouseover = event => { + let iteration = 0; + + clearInterval(interval); + + interval = setInterval(() => { + event.target.innerText = event.target.innerText + .split("") + .map((letter, index) => { + if(index < iteration) { + return event.target.dataset.value[index]; + } + + return letters[Math.floor(Math.random() * 26)] + }) + .join(""); + + if(iteration >= event.target.dataset.value.length){ + clearInterval(interval); + } + + iteration += 1 / 3; + }, 30); +} +const dropdowns = document.querySelectorAll('.dropdown'); +dropdowns.forEach(dropdown =>{ + const select = dropdown.querySelector('.select'); + const caret = dropdown.querySelector('.caret'); + const menu = dropdown.querySelector('.menu'); + const options = dropdown.querySelectorAll('.menu li'); + const selected = dropdown.querySelectorAll('.menu li'); + + + select.addEventListener('click',() => { + select.classList.toggle('select-clicked'); + caret.classList.toggle('caret-rotate'); + menu.classList.toggle('menu-open'); + }); + + options.forEach(options =>{ + option.addEventListener('click',() =>{ + selected.innerText = option.innerText; + select.classList.remove('select-clicked'); + caret.classList.remove('caret-rotate'); + menu.classList.remove('menu-open'); + options.forEach(option =>{ + option.classList.remove('active'); + }); + option.classList.add('active'); + }); + }); +}); +function myFunction() { + document.getElementById("myDropdown").classList.toggle("show"); +} + +window.onclick = function(event) { + if (!event.target.matches('.dropbtn')) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } + } +} +var coll = document.getElementsByClassName("collapsible"); +var i; + +for (i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function() { + this.classList.toggle("active"); + var content = this.nextElementSibling; + if (content.style.display === "block") { + content.style.display = "none"; + } else { + content.style.display = "block"; + } + }); +} +const button = document.querySelector('.collapsible'); +const content = document.querySelector('.content'); + +button.addEventListener('click', () => { + if (content.style.display === 'none' || content.style.display === '') { + content.style.display = 'block'; + } else { + content.style.display = 'none'; + } +}); diff --git a/story1.css b/story1.css new file mode 100644 index 0000000..d7297f1 --- /dev/null +++ b/story1.css @@ -0,0 +1,9 @@ +body{ + background-color: black; +} +p,h2{ + color: white; +} +h1{ + color:aqua +} diff --git a/story1.html b/story1.html new file mode 100644 index 0000000..83c0648 --- /dev/null +++ b/story1.html @@ -0,0 +1,34 @@ + + + + + + Eclipse Stories + +

Explaining Mechanics of Eclipse using Stories

+ + + +

1. Safety and Precautions for watching Eclipses

+

Story 1: "Grandma's Eclipse Wisdom" + + In a quaint little cottage nestled by a meadow, young Timmy sat wide-eyed, staring at the approaching solar eclipse. His grandmother, a woman of wisdom and warmth, noticed his fascination. + + "Timmy, come here, dear," she called, beckoning him to her side. + + As Timmy snuggled next to her, Grandma began, "Watching an eclipse is a wondrous experience, but we must do it safely, my love. You should never look directly at the sun, even during an eclipse." + + Timmy listened intently, absorbing every word. Grandma continued, "We'll use special glasses designed for this purpose. They have a special filter that protects our eyes from harmful rays." + + With gentle hands, Grandma handed Timmy a pair of eclipse glasses. "See, they fit snugly and have a dark tint. When you put them on, everything will be dim, except for the sun." + + Timmy carefully put them on, marveling at the darkened world around him. Suddenly, the sun emerged as a brilliant crescent, framed by the darkened sky. + + "You're seeing it, aren't you, Timmy?" Grandma asked with a smile. + + "Yes, Grandma! It's amazing!" Timmy exclaimed. + + They sat together, watching the eclipse safely, with Grandma's protective wisdom ensuring Timmy's wonder remained a cherished memory. +

+ + diff --git a/story2.html b/story2.html new file mode 100644 index 0000000..f5d2899 --- /dev/null +++ b/story2.html @@ -0,0 +1,28 @@ + + + + + + Story + +

The Celestial Alignment

+ +

+ In a land where knowledge thrived, there lived a young astronomer named Alaric. He was known for his insatiable curiosity and his love for unraveling the mysteries of the cosmos. + + One night, while gazing at the star-studded sky, Alaric noticed a peculiar pattern in the movements of the sun, moon, and Earth. His eyes widened with realization - an eclipse was imminent! + + Eager to understand this celestial phenomenon, Alaric embarked on a quest for knowledge. He sought out ancient scrolls, consulted wise sages, and conducted meticulous experiments. His passion drove him to master the science behind eclipses. + + He learned that eclipses occurred due to the precise alignment of the sun, moon, and Earth. When the moon orbited directly between the sun and Earth, casting its shadow upon our planet, a solar eclipse occurred. Conversely, when Earth positioned itself between the sun and the moon, its shadow cloaked the moon, resulting in a lunar eclipse. + + Armed with this newfound wisdom, Alaric set out to share his knowledge with the world. He crafted elaborate diagrams and conducted public demonstrations, illustrating the intricate dance of the celestial bodies. + + Word of Alaric's expertise spread far and wide, and people from distant lands flocked to learn from him. They marveled at the precision of the cosmos and the elegance of the eclipse's mechanics. + + Alaric's teachings ignited a spark of curiosity in the hearts of many, inspiring a new generation of astronomers and scientists. The once-mysterious eclipses became a subject of fascination, inviting all to gaze skyward in wonder. + + And so, in the land of knowledge, Alaric's legacy endured. His story became a testament to the power of human inquiry and the beauty of the natural world, reminding all that through understanding, even the most awe-inspiring cosmic events can be demystified.

+ + + \ No newline at end of file