diff --git a/package-lock.json b/package-lock.json index 416738aa9..67b23edf8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.1", "dependencies": { "cors": "^2.8.5", - "express": "^4.17.3" + "express": "^4.17.3", + "swup": "^2.0.19" }, "devDependencies": { "@babel/core": "^7.17.5", @@ -5410,6 +5411,14 @@ "node": ">=0.4.0" } }, + "node_modules/delegate-it": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/delegate-it/-/delegate-it-3.0.1.tgz", + "integrity": "sha512-XU8H4pjDGBW74hFIbjdLPnvtU3HF3P9bbZvoFBSBLb5JgNaTkRb/2lvC1V+9kmZsxVR0kad4bU3rYhQ/4Ij+Gw==", + "dependencies": { + "typed-query-selector": "^2.6.1" + } + }, "node_modules/depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -11149,6 +11158,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/opencollective-postinstall": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz", + "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==", + "bin": { + "opencollective-postinstall": "index.js" + } + }, "node_modules/optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -13183,6 +13200,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swup": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/swup/-/swup-2.0.19.tgz", + "integrity": "sha512-cyqcVG5ZlIwqRjvLhZvYFBoc8vDDZ5V0OMthTOa7OE/xowzqyhGRJ2hvFr6ecnJfpiTJGN5CIq+Ep2G7ty9gcw==", + "hasInstallScript": true, + "dependencies": { + "delegate-it": "^3.0.1", + "opencollective-postinstall": "^2.0.2" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -13540,6 +13567,11 @@ "node": ">= 0.6" } }, + "node_modules/typed-query-selector": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.8.0.tgz", + "integrity": "sha512-jo9NLGQ0b7sT9TK3mxzemATQqTb/uh8TRvcOK6WSwKNewALt3AA8q2m7cdpF/uUbd/cdixaBxCGe6fpzpEWbGw==" + }, "node_modules/typedarray-to-buffer": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", @@ -18726,6 +18758,14 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate-it": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/delegate-it/-/delegate-it-3.0.1.tgz", + "integrity": "sha512-XU8H4pjDGBW74hFIbjdLPnvtU3HF3P9bbZvoFBSBLb5JgNaTkRb/2lvC1V+9kmZsxVR0kad4bU3rYhQ/4Ij+Gw==", + "requires": { + "typed-query-selector": "^2.6.1" + } + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -22981,6 +23021,11 @@ "is-wsl": "^2.2.0" } }, + "opencollective-postinstall": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz", + "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==" + }, "optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -24511,6 +24556,15 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "swup": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/swup/-/swup-2.0.19.tgz", + "integrity": "sha512-cyqcVG5ZlIwqRjvLhZvYFBoc8vDDZ5V0OMthTOa7OE/xowzqyhGRJ2hvFr6ecnJfpiTJGN5CIq+Ep2G7ty9gcw==", + "requires": { + "delegate-it": "^3.0.1", + "opencollective-postinstall": "^2.0.2" + } + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -24762,6 +24816,11 @@ "mime-types": "~2.1.24" } }, + "typed-query-selector": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.8.0.tgz", + "integrity": "sha512-jo9NLGQ0b7sT9TK3mxzemATQqTb/uh8TRvcOK6WSwKNewALt3AA8q2m7cdpF/uUbd/cdixaBxCGe6fpzpEWbGw==" + }, "typedarray-to-buffer": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", diff --git a/package.json b/package.json index 98358108b..8d4f5cd6a 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ }, "dependencies": { "cors": "^2.8.5", - "express": "^4.17.3" + "express": "^4.17.3", + "swup": "^2.0.19" }, "repository": { "type": "git", diff --git a/src/index.js b/src/index.js index 13e4739cd..5086857fd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,130 @@ import './less/index.less' + +let reset = (_element)=>{ + setTimeout(()=>{ + _element.textContent = ''; + // __element.style.backgroundColor = " white" + }, 2000); +} + +let resetstyle = (ele)=>{ + setTimeout(()=>{ + ele.style.backgroundColor = 'white' + }, 5000); +} + // Your code goes here! +const nbar = document.querySelector('.nav') +// console.log(nbar); + +nbar.children[0].addEventListener('mouseover', (event)=>{ + nbar.style.backgroundColor = 'red' + resetstyle(nbr.children[0]) +}) + +nbar.addEventListener('click', (event)=>{ + nbar.style.backgroundColor = 'black' +}) + +nbar.addEventListener('mouseout', (event)=>{ + nbar.style.backgroundColor = 'green' +}) + +///////////////////////////////////////////// + +const top = document.querySelector('.intro') +const toptext = document.querySelector('.intro h2') +const tp = document.querySelector('.intro p') +// console.log(toptext) +// const b1 = document.createElement('p') +// b1.textContent = 'text' +// b1.classList.add('bl') +// console.log(b1) + +// const newtext = document.getElementsByClassName('b1') +// const nt = document.createTextNode(" word" ) + +window.addEventListener('scroll', ()=>{ + const scrollable = document.documentElement.scrollHeight - window.innerHeight; + const scrolled = window.screenY; + // console.log(scrolled) + console.log(scrollable) + +}); + +top.addEventListener('dblclick', (event)=>{ + toptext.textContent = "Jaisa Loves Wheels on the bus" + reset(toptext); +}) +tp.addEventListener('pointerover', (event)=>{ + tp.textContent = ' my daughter is adorable and i love her very much' +}) +tp.addEventListener('pointerleave',()=>{ + tp.textContent = 'jasia is having a good day' +}) + +tp.addEventListener('pointerleave', ()=>{ + tp.style.backgroundColor = 'purple' + resetstyle(tp); +}) +const bp = document.querySelector('.content-section') +// console.log(bp) + +bp.addEventListener('pointerenter', (event)=>{ + bp.style.backgroundColor = 'pink' + resetstyle(bp) +}) + + +/////////////////////////////////////////////////////////////////////// + +// const m1 = document.querySelector('') +const clickme = document.querySelector('.content-pick .btn') +const cm2 = document.querySelector('.content-pick .destination p') +cm2.classList.add('p1') + +const pslide = document.querySelector('.p1') +const apply = document.querySelector('.p1>button.activate') +let ic = 0; + +// cm2.addEventListener('animationstart', ()=>{ +// pslide.textContent = `animations started: ${ic}`; +// }) +// cm2.addEventListener('animationiteration', ()=>{ +// ic++; +// pslide.textContent = `animation iterations: ${ic}`; +// }) +// cm2.addEventListener('animationend', ()=>{ +// pslide.textContent = "animation ended"; +// pslide.classList.remove('p1'); + +// }) +// cm2.addEventListener('animationcancel', ()=>{ +// pslide.textcontent = "ended" +// }) + +// apply.addEventListener('click', ()=>{ +// pslide.classList.toggle('p1'); +// pslide.textContent = 'Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling. ' +// ic = 0; +// const active = pslide.classList.contains('p1') +// apply.textContent = active ? "cancel" : "activate"; +// }) +// console.log(pslide) + + + + + + + +/////////////////////////////////////////////////////////////////////////////////////////// +clickme.addEventListener('transitionrun', (event)=>{ + clickme.textContent = 'Sign up' + +}); + +clickme.addEventListener('transitionend', (event)=>{ + clickme.textContent = 'Signed up' +}) \ No newline at end of file diff --git a/src/less/home-page.less b/src/less/home-page.less index 3d6e32dc7..12140a23a 100644 --- a/src/less/home-page.less +++ b/src/less/home-page.less @@ -4,6 +4,7 @@ padding: 90px 0 10px; border-bottom: 2px dashed @navigation-border; + img { max-width: 100%; height: auto; @@ -14,6 +15,14 @@ } } +.transition-fade{ + opacity: 1; + transform: 500ms; + transform: translateX(0); + transform-origin: left; +} + + .content-section { margin: 30px 0; display: flex; @@ -106,9 +115,34 @@ margin: 0 auto 30px; } + + .btn { - .button-creator(200px, 45px, @button-bg, @white, 1.8rem); + .button-creator(200px, 45px, @button-bg, @white, 1.8rem); + transition-property: transform, background; + transition-duration: 1s; + transition-delay: 100ms; + } + .btn:hover { + transform: rotate(90deg); + } + + .p1.active { + animation-duration: 2s; + animation-name: slidein; + animation-iteration-count: 2; } + + @keyframes slidein { + from { + transform: translateX(100%) + } + to { + transform: translateX(0); + } + } + + } } }// home \ No newline at end of file