Created
January 14, 2024 18:48
-
-
Save tausiq2003/4c773f992258df325ec3edf800c8b14f to your computer and use it in GitHub Desktop.
This code generates a static site without HTML and CSS files, guess what it requires Express and jsdom and guess what is this website scroll till end. Thanks.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const express = require("express"); | |
| const { JSDOM } = require("jsdom"); | |
| const app = express(); | |
| const port = 6969; | |
| app.use(express.static("assets")); | |
| app.get("/", (req, res) => { | |
| const dom = new JSDOM(`<!DOCTYPE html>`); | |
| const doc = dom.window.document; | |
| const body = doc.querySelector("body"); | |
| body.style.overflowX = "visible"; | |
| const nav = doc.createElement("nav"); | |
| body.appendChild(nav); | |
| const nav1 = doc.createElement("nav"); | |
| body.appendChild(nav1); | |
| nav.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#111" viewBox="0 0 26 32"><path d="M14.4 5.52v-.08q0-.56.36-1t.92-.44 1 .36.48.96-.36 1-.96.4l-.24.08.08.12-.08.44-.16 1.28q.08.08.08.16l-.16.8q-.08.16-.16.24l-.08.32q-.16.64-.28 1.04t-.2.64V12q-.08.4-.12.64t-.28.8q-.16.32 0 1.04l.08.08q0 .24.2.56t.2.56q.08 1.6-.24 2.72l.16.48q.96.48.56 1.04l.4.16q.96.48 1.36.84t.8.76q.32.08.48.24l.24.08q1.68 1.12 3.36 2.72l.32.24v.08l-.08.16.24.16h.08q.24.16.32.16h.08q.08 0 .16-.08l.16-.08q.16-.16.32-.24h.32q.08 0 0 .08l-.32.16-.4.48h.56l.56.08q.24-.08.4-.16l.4-.24q.24-.08.48.16h.08q.08.08-.08.24l-.96.88q-.4.32-.72.4l-1.04.72q-.08.08-.16 0l-.24-.32-.16-.32-.2-.28-.24-.32-.2-.24-.16-.2-.32-.24q-.16 0-.32-.08l-1.04-.8q-.24 0-.56-.24-1.2-1.04-1.6-1.28l-.48-.32-.96-.16q-.48-.08-1.28-.48l-.64-.32q-.64-.32-.88-.32l-.32-.16q-.32-.08-.48-.16l-.16-.16q-.16 0-.32.08l-1.6.8-2 .88q-.8.64-1.52 1.04l-.88.4-1.36.96q-.16.16-.32 0l-.16.16q-.24.08-.32.08l-.32.16v.16h-.16l-.16.24q-.16.32-.32.36t-.2.12-.08.12l-.16.16-.24.16-.36-.04-.48.08-.32.08q-.4.08-.64-.12t-.4-.6q-.16-.24.16-.4l.08-.08q.08-.08.24-.08h.48L1.6 26l.32-.08q0-.16.08-.24.08-.08.24-.08v-.08q-.08-.16-.08-.32-.08-.16-.04-.24t.08-.08h.04l.08.24q.08.4.24.24l.08-.16q.08-.16.24-.16l.16.16.16-.16-.08-.08q0-.08.08-.08l.32-.32q.4-.48.96-.88 1.12-.88 2.4-1.36.4-.4.88-.4.32-.56.96-1.2.56-.4.8-.56.16-.32.4-.32H10l.16-.16q.16-.08.24-.16v-.4q0-.4.08-.64t.4-.24l.32-.32q-.16-.32-.16-.72h-.08q-.16-.24-.16-.48-.24-.4-.32-.64h-.24q-.08.24-.4.32l-.08.16q-.32.56-.56.84t-.88.68q-.4.4-.56.88-.08.24 0 .48l-.08.16h.08q0 .16.08.16h.08q.16.08.16.2t-.24.08-.36-.16-.2-.12l-.24.24q-.16.24-.32.2t-.08-.12l.08-.08q.08-.16 0-.16l-.64.16q-.08.08-.2 0t.04-.16l.4-.16q0-.08-.08-.08-.32.16-.64.08l-.4-.08-.08-.08q0-.08.08-.08.32.08.8-.08l.56-.24.64-.72.08-.16q.32-.64.68-1.16t.76-.84l.08-.32q.16-.32.32-.56t.4-.64l.24-.32q.32-.48.72-.48l.24-.24q.08-.08.08-.24l.16-.16-.08-.08q-.48-.4-.48-.72-.08-.56.36-.96t.88-.36.68.28l.16.16q.08 0 .08.08l.32.16v.24q.16.16.16.24.16-.24.48-.56l.4-1.28q0-.32.16-.64l.16-.24v-.16l.24-.96h.16l.24-.96q.08-.24 0-.56l-.32-.8z"/></svg>`; | |
| body.style.margin = 0; | |
| body.style.fontFamily = "Helvetica Now Text, Helvetica, Arial, sans-serif"; | |
| body.style.padding = 0; | |
| body.style.boxSizing = "border-box"; | |
| nav.style.display = "flex"; | |
| nav.style.gap = "12rem"; | |
| nav.style.backgroundColor = "#f5f5f5"; | |
| nav.style.justifyContent = "space-between"; | |
| nav.style.padding = "5px"; | |
| const listNav = ["Find A Store", "Help", "Join Us", "Sign In"]; | |
| const div1 = doc.createElement("div"); | |
| listNav.forEach((item, index) => { | |
| let t = doc.createTextNode(item); | |
| div1.appendChild(t); | |
| t.parentNode.style.fontWeight = 700; | |
| if (index < listNav.length - 1) { | |
| let t1 = doc.createTextNode(" | "); | |
| div1.appendChild(t1); | |
| } | |
| }); | |
| nav.appendChild(div1); | |
| //nav1 less go | |
| nav1.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pre-logo-svg" focusable="false" viewBox="0 0 24 24" role="img" width="64px" height="64px" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M21 8.719L7.836 14.303C6.74 14.768 5.818 15 5.075 15c-.836 0-1.445-.295-1.819-.884-.485-.76-.273-1.982.559-3.272.494-.754 1.122-1.446 1.734-2.108-.144.234-1.415 2.349-.025 3.345.275.2.666.298 1.147.298.386 0 .829-.063 1.316-.19L21 8.719z" clip-rule="evenodd"/></svg>`; | |
| const nav2Array = [ | |
| "New & Features", | |
| "Men", | |
| "Women", | |
| "Kids", | |
| "Sale", | |
| "Customise", | |
| "SNKRS", | |
| ]; | |
| nav1.style.display = "flex"; | |
| nav1.style.gap = "12rem"; | |
| nav1.style.justifyContent = "space-around"; | |
| const div2 = doc.createElement("div"); | |
| div2.style.marginTop = '1rem'; | |
| nav2Array.forEach((item) => { | |
| let t3 = doc.createElement('span'); | |
| div2.appendChild(t3); | |
| t3.textContent = item; | |
| t3.style.fontWeight = 600; | |
| t3.style.marginRight = "1rem"; | |
| }); | |
| nav1.appendChild(div2); | |
| const formInput = doc.createElement("input"); | |
| formInput.placeholder = "Search"; | |
| formInput.style.border = "1px solid black"; | |
| formInput.style.borderRadius = "100px"; | |
| formInput.style.height = "2rem"; | |
| formInput.style.paddingLeft = "2rem"; | |
| formInput.autocomplete = "off"; | |
| const div3 = doc.createElement("div"); | |
| nav1.appendChild(div3); | |
| nav1.appendChild(formInput); | |
| div3.style.display = "inline"; | |
| div3.style.marginRight = "-15.5rem"; | |
| div3.style.marginTop = "0.4rem"; | |
| div3.style.zIndex = "1"; | |
| div3.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pre-mobile-exposed-search-icon" focusable="false" viewBox="0 0 24 24" role="img" width="24px" height="24px" fill="none"><path stroke="currentColor" stroke-width="1.5" d="M13.962 16.296a6.716 6.716 0 01-3.462.954 6.728 6.728 0 01-4.773-1.977A6.728 6.728 0 013.75 10.5c0-1.864.755-3.551 1.977-4.773A6.728 6.728 0 0110.5 3.75c1.864 0 3.551.755 4.773 1.977A6.728 6.728 0 0117.25 10.5a6.726 6.726 0 01-.921 3.407c-.517.882-.434 1.988.289 2.711l3.853 3.853"/></svg>`; | |
| const div4 = doc.createElement("div"); | |
| nav1.appendChild(div4); | |
| div4.innerHTML = `<svg style="margin-right: 0.5rem;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pre-nav-design-icon" focusable="false" viewBox="0 0 24 24" role="img" width="24px" height="24px" fill="none"><path stroke="currentColor" stroke-width="1.5" d="M16.794 3.75c1.324 0 2.568.516 3.504 1.451a4.96 4.96 0 010 7.008L12 20.508l-8.299-8.299a4.96 4.96 0 010-7.007A4.923 4.923 0 017.205 3.75c1.324 0 2.568.516 3.504 1.451l.76.76.531.531.53-.531.76-.76a4.926 4.926 0 013.504-1.451"/></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pre-nav-design-icon" focusable="false" viewBox="0 0 24 24" role="img" width="24px" height="24px" fill="none"><path stroke="currentColor" stroke-width="1.5" d="M8.25 8.25V6a2.25 2.25 0 012.25-2.25h3a2.25 2.25 0 110 4.5H3.75v8.25a3.75 3.75 0 003.75 3.75h9a3.75 3.75 0 003.75-3.75V8.25H17.5"/></svg>`; | |
| //banner | |
| const banner = doc.createElement("div"); | |
| body.appendChild(banner); | |
| const lilBanner = doc.createElement("div"); | |
| lilBanner.style.backgroundColor = "#f5f5f5"; | |
| lilBanner.style.textAlign = "center"; | |
| banner.appendChild(lilBanner); | |
| const para1 = doc.createElement("p"); | |
| lilBanner.appendChild(para1); | |
| para1.textContent = "Move, Shop, Customise & Celebrate With Us."; | |
| para1.style.fontWeight = 500; | |
| const para2 = doc.createElement("p"); | |
| para2.style.fontWeight = 500; | |
| lilBanner.appendChild(para2); | |
| para2.textContent = | |
| "No matter what you feel like doing today. It's better as a Member."; | |
| const para3 = doc.createElement("p"); | |
| para3.style.fontWeight = 500; | |
| lilBanner.appendChild(para3); | |
| para3.textContent = "Join Us"; | |
| para3.style.textDecoration = "Underline"; | |
| const bigBanner = doc.createElement("div"); | |
| bigBanner.style.marginTop = "-1rem"; | |
| bigBanner.style.textAlign = "center"; | |
| banner.appendChild(bigBanner); | |
| const image = doc.createElement("img"); | |
| image.width = 1400; | |
| bigBanner.appendChild(image); | |
| image.src = "/nike-just-do-it.jpeg"; | |
| const para4 = doc.createElement("p"); | |
| bigBanner.appendChild(para4); | |
| para4.textContent = "This Season's Fresh Fits"; | |
| para4.style.textTransform = "uppercase"; | |
| para4.style.fontWeight = 900; | |
| para4.style.letterSpacing = "-0.2rem"; | |
| para4.style.fontSize = "3rem"; | |
| const para5 = doc.createElement("p"); | |
| bigBanner.appendChild(para5); | |
| para5.textContent = | |
| "Step into the new year with a wardrobe refresh that brings out your best personal style. Shop our Lunar New Year collection."; | |
| para5.style.fontWeight = 500; | |
| const button1 = doc.createElement("button"); | |
| bigBanner.appendChild(button1); | |
| button1.textContent = "Shop"; | |
| button1.style.backgroundColor = "#111"; | |
| button1.style.color = "#fff"; | |
| button1.style.border = "1px solid #111"; | |
| button1.style.outline = "none"; | |
| button1.style.borderRadius = "100px"; | |
| button1.style.padding = "0.5rem 1rem"; | |
| button1.style.transform = "scale(1.3)"; | |
| //Lets go to main | |
| const t2 = doc.createElement('p'); | |
| body.appendChild(t2); | |
| t2.textContent = 'Trending'; | |
| t2.style.fontWeight = 600; | |
| t2.style.marginLeft = '3rem'; | |
| t2.style.fontSize = '1.5rem'; | |
| const div5 = doc.createElement("div"); | |
| body.appendChild(div5); | |
| div5.style.display = "flex"; | |
| div5.style.flexDirection = "row"; | |
| div5.style.gap = "1rem"; | |
| div5.style.marginLeft = "3rem"; | |
| const childdiv5 = doc.createElement("div"); | |
| const childdiv6 = doc.createElement("div"); | |
| div5.appendChild(childdiv5); | |
| div5.appendChild(childdiv6); | |
| const image1 = doc.createElement("img"); | |
| image1.src = "/nike-just-do-it.jpg"; | |
| image1.width = 700; | |
| image1.height = 700; | |
| childdiv5.appendChild(image1); | |
| const image2 = doc.createElement("img"); | |
| image2.src = "/nike-just-do-it.png"; | |
| image2.width = 700; | |
| image2.height = 700; | |
| childdiv6.appendChild(image2); | |
| const wrapper = doc.createElement("div"); | |
| wrapper.style.marginTop = "-10rem"; | |
| wrapper.style.marginLeft = "2rem"; | |
| wrapper.style.marginBottom = "2rem"; | |
| wrapper.style.color = "#fff"; | |
| childdiv5.appendChild(wrapper); | |
| const wrapper1 = doc.createElement("div"); | |
| wrapper1.style.marginTop = "-8rem"; | |
| wrapper1.style.marginLeft = "2rem"; | |
| wrapper1.style.marginBottom = "2rem"; | |
| wrapper1.style.color = "#fff"; | |
| childdiv6.appendChild(wrapper1); | |
| const para6 = doc.createElement("p"); | |
| const h4 = doc.createElement("h4"); | |
| const lilbtn1 = doc.createElement("button"); | |
| const h41 = doc.createElement("h4"); | |
| const lilbtn2 = doc.createElement("button"); | |
| lilbtn1.textContent = lilbtn2.textContent = "Shop"; | |
| lilbtn1.style.backgroundColor = lilbtn2.style.backgrounColor = "#fff"; | |
| lilbtn1.style.color = lilbtn2.style.color = "#111"; | |
| lilbtn1.style.fontWeight = lilbtn2.style.fontWeight = 500; | |
| lilbtn1.style.border = lilbtn2.style.border = "1px solid #fff"; | |
| lilbtn1.style.outline = lilbtn2.style.outline = "none"; | |
| lilbtn1.style.borderRadius = lilbtn2.style.borderRadius = "100px"; | |
| lilbtn1.style.padding = lilbtn2.style.padding = "0.5rem 1rem"; | |
| lilbtn1.style.transform = lilbtn2.style.transform = "scale(1.3)"; | |
| para6.textContent = "Early Member Access"; | |
| h4.textContent = "New Phantom GX"; | |
| h41.textContent = "Retro Running Shoes"; | |
| wrapper.appendChild(para6); | |
| wrapper.appendChild(h4); | |
| wrapper.appendChild(lilbtn1); | |
| wrapper1.appendChild(h41); | |
| wrapper1.appendChild(lilbtn2); | |
| const videodiv = doc.createElement("div"); | |
| body.appendChild(videodiv); | |
| // const video = doc.createElement('video'); | |
| // videodiv.appendChild(video); | |
| // video.src = '/6342550201112.m3u8'; | |
| // regret for not doing the video, as m3u8 wasn't compatible and convertable to mp4 please cope. | |
| videodiv.style.marginTop = "2rem"; | |
| videodiv.style.textAlign = "center"; | |
| const videodivImg = doc.createElement("img"); | |
| videodiv.appendChild(videodivImg); | |
| videodivImg.src = "/image1.jpg"; | |
| videodivImg.width = 1400; | |
| const h2 = doc.createElement("h2"); | |
| videodiv.appendChild(h2); | |
| h2.textContent = "Nike G.T. Cut 3"; | |
| h2.style.textTransform = "uppercase"; | |
| h2.style.fontWeight = 900; | |
| h2.style.letterSpacing = "-0.2rem"; | |
| h2.style.fontSize = "3rem"; | |
| const para7 = doc.createElement("p"); | |
| videodiv.appendChild(para7); | |
| para7.textContent = | |
| "Built for players who are constantly cutting, stopping on a dime and changing the game."; | |
| para7.style.fontWeight = 600; | |
| const btn2 = doc.createElement("button"); | |
| videodiv.appendChild(btn2); | |
| btn2.textContent = "Explore"; | |
| btn2.style.backgroundColor = "#111"; | |
| btn2.style.color = "#fff"; | |
| btn2.style.border = "1px solid #111"; | |
| btn2.style.outline = "none"; | |
| btn2.style.borderRadius = "100px"; | |
| btn2.style.padding = "0.5rem 1rem"; | |
| btn2.style.transform = "scale(1.3)"; | |
| const sliderDiv = doc.createElement("div"); | |
| body.appendChild(sliderDiv); | |
| const headerSlider = doc.createElement("div"); | |
| sliderDiv.appendChild(headerSlider); | |
| headerSlider.style.display = "flex"; | |
| headerSlider.style.flexDirection = "row"; | |
| headerSlider.style.justifyContent = "space-between"; | |
| headerSlider.style.paddingInline = "3rem"; | |
| const mainSlider = doc.createElement("div"); | |
| sliderDiv.appendChild(mainSlider); | |
| mainSlider.style.display = "flex"; | |
| mainSlider.style.flexDirection = "row"; | |
| const header = doc.createElement("h2"); | |
| headerSlider.appendChild(header); | |
| header.textContent = "New Workout Essentials"; | |
| const wrapper12 = doc.createElement("div"); | |
| headerSlider.appendChild(wrapper12); | |
| const leftArrow = doc.createElement("button"); | |
| wrapper12.appendChild(leftArrow); | |
| wrapper12.style.marginTop = "2rem"; | |
| leftArrow.textContent = "<"; | |
| leftArrow.style.marginRight = "3rem"; | |
| wrapper12.style.marginRight = "3rem"; | |
| const rightArrow = doc.createElement("button"); | |
| wrapper12.appendChild(rightArrow); | |
| rightArrow.textContent = ">"; | |
| Array.from(wrapper12.children).forEach((child) => { | |
| child.style.border = "1px solid #e5e5e5"; | |
| child.style.outline = "none"; | |
| child.style.backgroundColor = "#e5e5e5"; | |
| child.style.borderRadius = "100%"; | |
| child.style.transform = "scale(2.5)"; | |
| child.style.fontWeight = 100; | |
| child.style.marginBottom = "2rem"; | |
| }); | |
| let sliderObj = [ | |
| { | |
| img: "/asdf.png", | |
| header: "Nike Air Zoom TR 1", | |
| para: "Men's Workout Shoes", | |
| price: "10 795 INR", | |
| }, | |
| { | |
| img: "/asdf1.png", | |
| header: "Nike Metcon 9 AMP", | |
| para: "Men's Workout Shoes", | |
| price: "12 795 INR", | |
| }, | |
| { | |
| img: "/asdf2.png", | |
| header: "Nike Dri-FIT Ready", | |
| para: "Men's Short-Sleeve Fitness Top", | |
| price: "2 495 INR", | |
| }, | |
| { | |
| img: "/asdf3.png", | |
| header: "Nike Form", | |
| para: "Men's Dri-FIT Hooded Versatile Jacket", | |
| price: "3 695 INR", | |
| }, | |
| { | |
| img: "/asdf4.png", | |
| header: "Nike Repel Unlimited", | |
| para: "Men's Water-Repellent Tapered-Leg Versatile Trousers", | |
| price: "4 695 INR", | |
| }, | |
| { | |
| img: "/asdf5.png", | |
| header: "Nike Metcon 9", | |
| para: "Men's Workout Shoes", | |
| price: "12 795 INR", | |
| }, | |
| { | |
| img: "/asdf6.png", | |
| header: "Nike Dri-FIT UV Hyverse", | |
| para: "Men's Short-Sleeve Fitness Top", | |
| price: "1 995 INR", | |
| }, | |
| { | |
| img: "/asdf7.png", | |
| header: "Nike Dri-FIT", | |
| para: "Men's Fitness T-Shirt", | |
| price: "1 795 INR", | |
| }, | |
| { | |
| img: "/asdf8.png", | |
| header: "nike Metcon 9 AMP", | |
| para: "Women's Workout Shoes", | |
| price: "12 795 INR", | |
| }, | |
| { | |
| img: "/asdf9.png", | |
| header: "Nike Zenvy Rib", | |
| para: "Women's Dri-FIT Short-Sleeve Cropped Top", | |
| price: "3 695 INR", | |
| }, | |
| ]; | |
| sliderObj.forEach((item) => { | |
| const slider = doc.createElement("div"); | |
| slider.classList.add("slider"); | |
| mainSlider.appendChild(slider); | |
| const img = doc.createElement("img"); | |
| img.style.marginLeft = "1rem"; | |
| slider.appendChild(img); | |
| img.src = item.img; | |
| const header = doc.createElement("h4"); | |
| slider.appendChild(header); | |
| header.textContent = item.header; | |
| const para = doc.createElement("p"); | |
| slider.appendChild(para); | |
| para.textContent = item.para; | |
| const price = doc.createElement("p"); | |
| slider.appendChild(price); | |
| price.textContent = item.price; | |
| }); | |
| //sliding will be done in future. | |
| const t3 = doc.createElement('p'); | |
| t3.textContent = 'Don\'t Miss'; | |
| body.appendChild(t3); | |
| t3.style.fontWeight = 600; | |
| t3.style.marginLeft = '3.5rem'; | |
| t3.style.fontSize = '1.5rem'; | |
| const videoDiv2 = doc.createElement("div"); | |
| body.appendChild(videoDiv2); | |
| t3.parentNode.style.fontWeight = 600; | |
| const videoDiv2Img = doc.createElement("img"); | |
| videoDiv2.appendChild(videoDiv2Img); | |
| videoDiv2.style.textAlign = "center"; | |
| videoDiv2Img.src = "/image.jpg"; | |
| videoDiv2Img.width = 1400; | |
| const p1 = doc.createElement("p"); | |
| const h3 = doc.createElement("h3"); | |
| const p2 = doc.createElement("p"); | |
| const btn3 = doc.createElement("button"); | |
| p1.textContent = "Nike Dynamo 2 EasyOn"; | |
| h3.textContent = "Nike EasyOn And Go"; | |
| h3.style.textTransform = "uppercase"; | |
| h3.style.fontWeight = 900; | |
| h3.style.letterSpacing = "-0.2rem"; | |
| h3.style.fontSize = "3rem"; | |
| p2.textContent = "Nike EasyOn--Designed to put on and get going"; | |
| btn3.textContent = "Shop"; | |
| btn3.style.backgroundColor = "#111"; | |
| btn3.style.color = "#fff"; | |
| btn3.style.border = "1px solid #111"; | |
| btn3.style.outline = "none"; | |
| btn3.style.borderRadius = "100px"; | |
| btn3.style.padding = "0.5rem 1rem"; | |
| btn3.style.transform = "scale(1.3)"; | |
| videoDiv2.appendChild(p1); | |
| videoDiv2.appendChild(h3); | |
| videoDiv2.appendChild(p2); | |
| videoDiv2.appendChild(btn3); | |
| const sliderDiv1 = doc.createElement("div"); | |
| body.appendChild(sliderDiv1); | |
| const headerSlider1 = doc.createElement("div"); | |
| sliderDiv1.appendChild(headerSlider1); | |
| headerSlider1.style.display = "flex"; | |
| headerSlider1.style.flexDirection = "row"; | |
| headerSlider1.style.justifyContent = "space-between"; | |
| headerSlider1.style.paddingInline = "3rem"; | |
| const mainSlider1 = doc.createElement("div"); | |
| sliderDiv1.appendChild(mainSlider1); | |
| mainSlider1.style.display = "flex"; | |
| mainSlider1.style.flexDirection = "row"; | |
| const header1 = doc.createElement("h2"); | |
| headerSlider1.appendChild(header1); | |
| header1.textContent = "Shop by Sport"; | |
| const wrapper2 = doc.createElement("div"); | |
| headerSlider1.appendChild(wrapper2); | |
| const leftArrow1 = doc.createElement("button"); | |
| wrapper2.appendChild(leftArrow1); | |
| wrapper2.style.marginTop = "2rem"; | |
| leftArrow1.textContent = "<"; | |
| leftArrow1.style.marginRight = "3rem"; | |
| const rightArrow1 = doc.createElement("button"); | |
| wrapper2.appendChild(rightArrow1); | |
| rightArrow1.textContent = ">"; | |
| Array.from(wrapper2.children).forEach((child) => { | |
| child.style.border = "1px solid #e5e5e5"; | |
| child.style.outline = "none"; | |
| child.style.backgroundColor = "#e5e5e5"; | |
| child.style.borderRadius = "100%"; | |
| child.style.transform = "scale(2.5)"; | |
| child.style.fontWeight = 100; | |
| child.style.marginBottom = "2rem"; | |
| }); | |
| const sliderObj1 = [ | |
| { | |
| img: "qwer.jpg", | |
| header: "Nike Basketball", | |
| para: "Styles made for your game.", | |
| para1: "Shop", | |
| }, | |
| { | |
| img: "qwer1.jpg", | |
| header: "Nike Golf", | |
| para: "Conquer any course in style.", | |
| para1: "Shop", | |
| }, | |
| { | |
| img: "qwer2.jpg", | |
| header: "Nike Trail", | |
| para: "Gear that leads to wild places.", | |
| para1: "Shop", | |
| }, | |
| { | |
| img: "qwer3.jpg", | |
| header: "Nike Tennis", | |
| para: "Serve up in style.", | |
| para1: "Shop", | |
| }, | |
| { | |
| img: "qwer4.jpg", | |
| header: "Nike Football", | |
| para: "Gear up for the pitch.", | |
| para1: "Shop", | |
| }, | |
| ]; | |
| sliderObj1.forEach((item) => { | |
| const slider1 = doc.createElement("div"); | |
| slider1.classList.add("slider"); | |
| mainSlider1.appendChild(slider1); | |
| const img = doc.createElement("img"); | |
| img.style.marginLeft = "1rem"; | |
| slider1.appendChild(img); | |
| img.src = item.img; | |
| const header = doc.createElement("h4"); | |
| slider1.appendChild(header); | |
| header.textContent = item.header; | |
| const para = doc.createElement("p"); | |
| slider1.appendChild(para); | |
| para.textContent = item.para; | |
| const para1 = doc.createElement("p"); | |
| slider1.appendChild(para1); | |
| para1.textContent = item.para1; | |
| para1.style.textDecoration = "underline"; | |
| }); | |
| const lastDiv = doc.createElement("div"); | |
| body.appendChild(lastDiv); | |
| lastDiv.style.display = "flex"; | |
| lastDiv.style.flexDirection = "row"; | |
| lastDiv.style.gap = "1rem"; | |
| lastDiv.style.justifyContent = "space-around"; | |
| const lastdiv1 = doc.createElement("div"); | |
| const lastdiv2 = doc.createElement("div"); | |
| const lastdiv3 = doc.createElement("div"); | |
| const lastdiv4 = doc.createElement("div"); | |
| lastDiv.appendChild(lastdiv1); | |
| lastDiv.appendChild(lastdiv2); | |
| lastDiv.appendChild(lastdiv3); | |
| lastDiv.appendChild(lastdiv4); | |
| createLastDivLists( | |
| lastdiv1, | |
| ["Air Force 1", "Huarache", "Air Max 90", "Air Max 95"], | |
| "Icons" | |
| ); | |
| createLastDivLists( | |
| lastdiv2, | |
| ["All Shoes", "Custom Shoes", "Jordan Shoes", "Running Shoes"], | |
| "Shoes" | |
| ); | |
| createLastDivLists( | |
| lastdiv3, | |
| ["All Clothing", "Modest Wear", "Hoddies & Pullovers", "Shirt & Tops"], | |
| "Clothing" | |
| ); | |
| createLastDivLists( | |
| lastdiv4, | |
| [ | |
| "Infant & Toddlers's Shoes", | |
| "Kids' Shoes", | |
| "Kids' Jordan Shoes", | |
| "Kids' Basketball Shoes", | |
| ], | |
| "Kids'" | |
| ); | |
| function createLastDivLists(div, array, header) { | |
| const paraheader = doc.createElement("h3"); | |
| div.appendChild(paraheader); | |
| paraheader.textContent = header; | |
| array.forEach((item) => { | |
| const para = doc.createElement("p"); | |
| div.appendChild(para); | |
| para.style.color = "#707072"; | |
| para.style.fontWeight = 500; | |
| para.textContent = item; | |
| }); | |
| } | |
| //footer less go | |
| const footer = doc.createElement("footer"); | |
| body.appendChild(footer); | |
| footer.style.marginTop = "2rem"; | |
| footer.style.backgroundColor = "#111"; | |
| const contentDiv1 = doc.createElement("div"); | |
| const contentDiv2 = doc.createElement("div"); | |
| const contentDiv3 = doc.createElement("div"); | |
| footer.appendChild(contentDiv1); | |
| footer.appendChild(contentDiv2); | |
| footer.appendChild(contentDiv3); | |
| footer.style.display = "flex"; | |
| footer.style.flexDirection = "row"; | |
| footer.style.gap = "5rem"; | |
| footer.style.justifyContent = "space-around"; | |
| createFooterDiv(contentDiv1, "Find A Store", ['Become a Member', 'Send Us Feedback']); | |
| createFooterDiv(contentDiv2, "Get Help", ['Order Status', 'Delivery', 'Returns', 'Payment Options', 'Contact Us for Inquiries', 'Contact Us On All Other Inqueries']); | |
| createFooterDiv(contentDiv3, "About Nike", ['News', 'Careers', 'Investors', 'Sustainablity']); | |
| function createFooterDiv(div, header, array) { | |
| const head = doc.createElement("h3"); | |
| div.appendChild(head); | |
| head.textContent = header; | |
| head.style.color = "#fff"; | |
| array.forEach((item) => { | |
| const para = doc.createElement("p"); | |
| div.appendChild(para); | |
| para.style.color = "#7e7e7e"; | |
| para.style.fontSize = "0.8rem"; | |
| para.textContent = item; | |
| }); | |
| } | |
| res.writeHead(200, { "Content-Type": "text/html" }); | |
| res.end(dom.serialize()); | |
| }); | |
| app.listen(port, () => { | |
| console.log(`onlyjs is available at ${port}`); | |
| console.log(__dirname); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment