Skip to content

Instantly share code, notes, and snippets.

@Tribhuwan-Joshi

Tribhuwan-Joshi/contact.js

Last active July 30, 2022 10:24
Show Gist options
  • Save Tribhuwan-Joshi/20ee171e816c29ade02e536a70afa411 to your computer and use it in GitHub Desktop.
Save Tribhuwan-Joshi/20ee171e816c29ade02e536a70afa411 to your computer and use it in GitHub Desktop.
Download ZIP
This is index.js to control the main flow
Raw
contact.js
export default function contactPage() {
const main = document.querySelector(".main");
main.innerHTML = `
<div class="content">
<div style="display:flex;justify-content:center;align-items: center;margin-top: 0;">
<h1>Connect with us </h1><img src="../src/call.png" class="contact-img" alt="caller">
</div>
<div class="email"> Email - EatyDeez@gmail.com</div>
<div class="call">Phone - 11-12134343</div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26401.196074761923!2d-118.52812612555374!3d34.19365620897365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c299ef3b8308c3%3A0xe4bece2917a2e711!2sMillie&#39;s%20Restaurant%20%26%20Bakery!5e0!3m2!1sen!2sin!4v1659003558607!5m2!1sen!2sin"
width="600" height="450" style="border:3px solid black; width: 100%;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>`
}
Raw
home.js
export default function homePage() {
const main = document.querySelector("div.main");
main.innerHTML = `<div class="content home">
<h1> 🔥 The Taste of Heaven 🔥</h1>
<img src="../src/img.jpeg" alt="area">
<span class="text"> <span class="first">E</span>aty is a imaginary restaurant created to learn webpacks in CSS.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quod omnis doloribus maiores voluptatibus
repudiandae. Placeat doloribus ex quod, corporis eius quis accusantium vitae excepturi laboriosam, natus facere
aspernatur in.
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum cupiditate accusantium facere, iusto illo quam
pariatur nostrum numquam aspernatur! Sint excepturi in quis numquam ut culpa impedit ipsam nam necessitatibus.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse rem explicabo eos atque, nihil dolorum ipsa laborum
est dignissimos ad porro enim sint voluptates nisi sunt velit? Amet, neque id.</p>
</span>
<div class="lets">Lets Join Eaty Culture ! 🌶️🌶️🌶️</div>
</div>`
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="main.js" defer></script> -->
<link rel="icon" href="../src/icon.png">
<link rel="stylesheet" href="../src/style.css">
<script defer src="../src/index.js" type="module"></script>
<title>Eaty</title>
</head>
<body>
</body>
</html>
Raw
index.js
import homePage from '../src/home.js'
import menuPage from '../src/menu.js'
import contactPage from '../src/contact.js'
document.body.innerHTML = `<div class="header">
<div class="cont">
<div class="name">Eaty</div>
<div class="slogan">~ Share The taste </div>
</div>
<div class="nav">
<div class="home current"> Home</div>
<div class="menu">Menu</div>
<div class="contact">Contact</div>
</div>
</div>
<div class="main">
</div>
<div class="footer">
<div class="cite">Crafted by Tjsm</div>
<div class="img"> <a href="https://github.com/Tribhuwan-Joshi"></a> <img src="../src/github.png" alt="github"
class="github" title="Github"></div>
</div>`;
const navButtons = document.querySelectorAll(".nav div");
const main = document.querySelector(".main");
main.innerHTML = `<div class="content home">
<h1> 🔥 The Taste of Heaven 🔥</h1>
<img src="../src/img.jpeg" alt="area">
<span class="text"> <span class="first">E</span>aty is a imaginary restaurant created to learn webpacks in CSS.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quod omnis doloribus maiores voluptatibus
repudiandae. Placeat doloribus ex quod, corporis eius quis accusantium vitae excepturi laboriosam, natus facere
aspernatur in.
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum cupiditate accusantium facere, iusto illo quam
pariatur nostrum numquam aspernatur! Sint excepturi in quis numquam ut culpa impedit ipsam nam necessitatibus.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse rem explicabo eos atque, nihil dolorum ipsa laborum
est dignissimos ad porro enim sint voluptates nisi sunt velit? Amet, neque id.</p>
</span>
<div class="lets">Lets Join Eaty Culture ! 🌶️🌶️🌶️</div>
</div>`
navButtons.forEach((b) => {
b.addEventListener("click", (e) => changeContent(e));
});
function changeContent(e) {
let btn = e.target;
console.log(btn);
main.textContent = "";
console.log("main changed",btn);
navButtons.forEach((b) => b.classList.remove('current'));
if (btn.textContent == "Home") {
btn.classList.add("current");
homePage();
}
else if (btn.textContent == "Contact") {
btn.classList.add("current");
contactPage();
}
else {
btn.classList.add("current");
menuPage();
}
}
Raw
menu.js
export default function menuPage() {
const main = document.querySelector(".main");
main.innerHTML = `<div class="content">
<h1>🍕 Our Dishes 🍜</h1>
<div class="dishes">
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
<div class="card">
<div class="dish-name">Italian Pizza</div>
<div class="price">350 $</div>
</div>
</div>`
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment