diff --git a/url-shortening-api-master/.gitignore b/url-shortening-api-master/.gitignore new file mode 100644 index 0000000..fc5cb26 --- /dev/null +++ b/url-shortening-api-master/.gitignore @@ -0,0 +1,40 @@ +# Design files (please do not remove 🙂) +*.sketch +*.fig +*.xd + +# Dependencies +/node_modules +/.pnp +.pnp.js +yarn.debug.log* +yarn.error.log* +npm-debug.log* + +# Environment and secrets +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# Testing +/coverage + +# Production +/build +/dist +/.next +/out + +# IDEs and editors +/.idea +/.vscode +*.swp +*.swo + +# Misc +*.log +*.pem +.DS_Store +Thumbs.db diff --git a/url-shortening-api-master/README.md b/url-shortening-api-master/README.md new file mode 100644 index 0000000..6c51255 --- /dev/null +++ b/url-shortening-api-master/README.md @@ -0,0 +1,77 @@ +# Frontend Mentor - Shortly URL shortening API Challenge solution + +This is a solution to the [Shortly URL shortening API Challenge challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Demo Video](#demo-video) + + + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) +- [Author](#author) + + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for the site depending on their device's screen size +- Shorten any valid URL +- See a list of their shortened links, even after refreshing the browser +- Copy the shortened link to their clipboard in a single click +- Receive an error message when the `form` is submitted if: + - The `input` field is empty + +### Screenshot + +![](./preview.png) + + +### Demo Video + +![Preview](demo/demo.gif) + +### Links + +- Solution URL: [Add solution URL here](https://github.com/KrishnaKC15/frontend-mentor/tree/main/url-shortening-api-master) +- Live Site URL: [Add live site URL here](https://krishnakc15.github.io/frontend-mentor/url-shortening-api-master/index.html) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- TinyUrl API +- JS + +### What I learned + +- localStorage Api uses for keeping data even after refreshing website or closing and reopening of browser. +- learned a bit about CORS and importance of local web server in development. +- implemented my first api with the use of documentation and gemini ai. +- integrated complete knowledge of my JS till now. + +### Continued development + +I may improve the UI of the Website in near future. + + +## Author +- Github - [View My Github Profile](https://github.com/KrishnaKC15) +- Portfolio Website-[Visit My Portfolio Website](https://krishnakc15.github.io/Portfolio/) +- Frontend Mentor - [@KrishnaKC15](https://www.frontendmentor.io/profile/KrishnaKC15) +- Likedin- [Krishna Chauhan](https://www.linkedin.com/in/krishna-chauhan-1672b8345/) +- View my all Frontend projects live demo- [Frontend Projects](https://krishnakc15.github.io/frontend-mentor/) diff --git a/url-shortening-api-master/app.js b/url-shortening-api-master/app.js new file mode 100644 index 0000000..6d62abc --- /dev/null +++ b/url-shortening-api-master/app.js @@ -0,0 +1,161 @@ +let inputLinkBox=document.querySelector('#input-link') +let tinyUrlApiKey="3JwONqJXASFCnrbNGWDtAg6QaaQkRx3YAteEAw98aUMUpgc77TKKqvuNuqTk"; +let history=document.querySelector('.history'); +let count=1; +let retriever=1; + +let shortenBtn=document.querySelector('#shorten-btn') + +function saveToHistory(url){ + + localStorage.setItem(`${count}`,url); + console.log(localStorage); + count++; +} + +function createCopyBtn(url,box){ + let copy=document.createElement('button'); + copy.innerHTML=''; + copy.classList.add('copy-btn'); + copy.onclick=()=>{copyToClipboard(url)} + box.append(copy); +} + +function createLinkText(link,box){ + let linkbox=document.createElement('a'); + linkbox.innerText=link; + + + linkbox.setAttribute('href',link) + linkbox.setAttribute('target','_blank') + box.append(linkbox); +} + + + +function retrieveHistory(){ + for(let i=0;i{ + verify.remove(); + + },4000) +} + + + +shortenBtn.addEventListener('click',async function(){ + let urlEnter=geturl(); + inputLinkBox.classList.remove('wrong') + if(urlEnter!=''|| urlEnter!=" ") + { + shorten=await shorturl(urlEnter); + if(shorten) + { + let box=document.createElement('div'); + + createLinkText(shorten,box); + + createCopyBtn(shorten,box) + box.setAttribute('class','history-anchors') + removeExcesshistory(); + saveToHistory(shorten); + history.prepend(box); + + } + else{ + inputLinkBox.classList.add('wrong') + } + } +}) + +function removeExcesshistory(){ + if(history.childElementCount==6) + { + + history.children[history.children.length-1].remove(); + count-- + } + if(localStorage.length>6) + { + localStorage.removeItem(`${localStorage.length}`) + count--; + removeExcesshistory(); + + } + +} + +let menu=document.querySelector('#home') + +let mobMenu=document.querySelector('.mob-view') +let open=false; +menu.addEventListener('click',function(){ + if(!open){ + mobMenu.classList.add('visible-menu'); + open=true; + } + else{ + mobMenu.classList.remove('visible-menu'); + + open=false + } +}) \ No newline at end of file diff --git a/url-shortening-api-master/demo/demo.gif b/url-shortening-api-master/demo/demo.gif new file mode 100644 index 0000000..1cf2108 Binary files /dev/null and b/url-shortening-api-master/demo/demo.gif differ diff --git a/url-shortening-api-master/demo/demo.mp4 b/url-shortening-api-master/demo/demo.mp4 new file mode 100644 index 0000000..b99f3f0 Binary files /dev/null and b/url-shortening-api-master/demo/demo.mp4 differ diff --git a/url-shortening-api-master/images/bg-boost-desktop.svg b/url-shortening-api-master/images/bg-boost-desktop.svg new file mode 100644 index 0000000..df7ad6f --- /dev/null +++ b/url-shortening-api-master/images/bg-boost-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/bg-boost-mobile.svg b/url-shortening-api-master/images/bg-boost-mobile.svg new file mode 100644 index 0000000..b0a0677 --- /dev/null +++ b/url-shortening-api-master/images/bg-boost-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/bg-shorten-desktop.svg b/url-shortening-api-master/images/bg-shorten-desktop.svg new file mode 100644 index 0000000..40a52fd --- /dev/null +++ b/url-shortening-api-master/images/bg-shorten-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/bg-shorten-mobile.svg b/url-shortening-api-master/images/bg-shorten-mobile.svg new file mode 100644 index 0000000..29f7c4a --- /dev/null +++ b/url-shortening-api-master/images/bg-shorten-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/favicon-32x32.png b/url-shortening-api-master/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/url-shortening-api-master/images/favicon-32x32.png differ diff --git a/url-shortening-api-master/images/icon-brand-recognition.svg b/url-shortening-api-master/images/icon-brand-recognition.svg new file mode 100644 index 0000000..26ec245 --- /dev/null +++ b/url-shortening-api-master/images/icon-brand-recognition.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/icon-detailed-records.svg b/url-shortening-api-master/images/icon-detailed-records.svg new file mode 100644 index 0000000..54d3b72 --- /dev/null +++ b/url-shortening-api-master/images/icon-detailed-records.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/icon-facebook.svg b/url-shortening-api-master/images/icon-facebook.svg new file mode 100644 index 0000000..8146f12 --- /dev/null +++ b/url-shortening-api-master/images/icon-facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/icon-fully-customizable.svg b/url-shortening-api-master/images/icon-fully-customizable.svg new file mode 100644 index 0000000..9458399 --- /dev/null +++ b/url-shortening-api-master/images/icon-fully-customizable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/icon-instagram.svg b/url-shortening-api-master/images/icon-instagram.svg new file mode 100644 index 0000000..f270957 --- /dev/null +++ b/url-shortening-api-master/images/icon-instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/icon-pinterest.svg b/url-shortening-api-master/images/icon-pinterest.svg new file mode 100644 index 0000000..515764f --- /dev/null +++ b/url-shortening-api-master/images/icon-pinterest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/icon-twitter.svg b/url-shortening-api-master/images/icon-twitter.svg new file mode 100644 index 0000000..116dd37 --- /dev/null +++ b/url-shortening-api-master/images/icon-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/illustration-working.svg b/url-shortening-api-master/images/illustration-working.svg new file mode 100644 index 0000000..eacbbbd --- /dev/null +++ b/url-shortening-api-master/images/illustration-working.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/images/logo.svg b/url-shortening-api-master/images/logo.svg new file mode 100644 index 0000000..ad725d4 --- /dev/null +++ b/url-shortening-api-master/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/url-shortening-api-master/index.html b/url-shortening-api-master/index.html new file mode 100644 index 0000000..0eb907c --- /dev/null +++ b/url-shortening-api-master/index.html @@ -0,0 +1,164 @@ + + + + + + + + + Shorter + + + + + + + + + + + +
+ +
+
Shorter
+ +
+ +
+ Features + Pricing + Resources +
+ +
+
+ +
+
+ +
+ +
+

More than just shorter links

+
Build your brand’s recognition and get detailed insights + on how your links are performing.
+ +
+ +
+ +
+
+ + +
+
+ +
+ +
+ +
+

Advanced Statistics

+
+ Track how your links are performing across the web with our + advanced statistics dashboard. +
+
+
+
+
+
+
+ Brand Recognition +
+
+ Boost your brand recognition with each click. Generic links don’t + mean a thing. Branded links help instil confidence in your content. +
+
+ +
+
+
+ Detailed Records +
+
+ Gain insights into who is clicking your links. Knowing when and where + people engage with your content helps inform better decisions. +
+
+
+
+
+ Fully Customizable +
+
+ Improve brand awareness and content discoverability through customizable + links, supercharging audience engagement. +
+
+
+ + +
+ + + + + + + +
+ Challenge by Frontend Mentor. + Coded by Your Name Here. +
+ + + + diff --git a/url-shortening-api-master/preview.png b/url-shortening-api-master/preview.png new file mode 100644 index 0000000..1943f26 Binary files /dev/null and b/url-shortening-api-master/preview.png differ diff --git a/url-shortening-api-master/style.css b/url-shortening-api-master/style.css new file mode 100644 index 0000000..17d5f02 --- /dev/null +++ b/url-shortening-api-master/style.css @@ -0,0 +1,537 @@ +*{ + padding: 0; + margin: 0; + font-family: "Poppins", sans-serif; + font-style: normal; + +} +body{ + overflow-x: hidden; +} + +/* .container{ + + /* position: relative; */ + /* overflow-x: hidden; */ +/* } */ +header{ + display: flex; + /* justify-content: space-between; */ + margin-top: 2%; + margin-left: 8%; + margin-right: 8%; +} +.white{ + margin: 0; +} +.name{ + font-size: 24px; + font-weight: bolder; + padding-right: 2em; +} +.options span{ + display: inline-block; + padding: 0.3em 1.1em 0 0; + + +} +.login-btns{ + margin-left: auto; + +} +.mob-view{ + flex: 2; +} +.top-btn{ + width: 6em; + background-color: transparent; + border:none; + border-radius: 5em; + height: 2.5em; + +} +#sign-up{ + background-color: hsl(180, 66%, 49%); +} + +.intro{ + width: 100%; + height:30em; + margin-top: -3em; + margin-left: -4em; +} +.intro-img{ + width: 30%; + height: 60%; + margin-top: 3em; + position: absolute; + right: -30%; + +} +.intro img{ + width: 100%; + height: 100%; + /* transform: scale(0.7); */ + /* position: absolute; */ + right:0em; + /* top:-2em; */ +} +.intro-text{ + /* width: 100%; */ + height: 100%; + padding-top:5em; + +} +.bold-intro{ + font-size: 4em; + font-weight: bolder; +} +.normalfont-intro{ + color: rgba(0, 0, 0, 0.501); +} +.intro-get-started{ + border: none; + background-color: hsl(180, 66%, 49%); + border-radius: 5em; + width: 10em; + height: 3em; + margin-top: 1em; +} + + +.grey{ + background-color: hsla(0, 0%, 75%, 0.416); + margin: 0 ; + width: 100%; +} + + +.history{ + padding-top: 6em; +} +.intro{ + transform: scale(0.8); +} + +.link-input-bar{ + width: 100%; + height: 6em; + background-image: url(images/bg-shorten-desktop.svg); + background-size: cover; + background-color: hsl(257, 27%, 26%); + position: absolute; + top: 27.5em; + +} +#input-link{ + display: inline-block; + width: 75%; + height: 50%; + /* border-radius: 2em; */ + margin-top: 1.5em; + margin-left: 4%; + /* border: none; */ + +} + +#shorten-btn{ + height: 50%; + width: 15%; + background-color: hsl(180, 66%, 49%); + border-radius: 5em; +} + +.advance-stats{ + text-align: center; + margin: 4em 25%; + +} + +.stat-head{ + font-weight: 800; + font-size: 2em; +} +.stat-intro{ + padding-top: 1em; + color: rgba(0, 0, 0, 0.501); +} +.stat-cards{ + width: 80%; + display: flex; + justify-content: space-between; + margin-left: 8%; + margin-right: 8%; + +} +.cards{ + width: 15em; + height: 20em; + background-color: white; + + /* margin-top: 1em; */ + display: inline-block; + padding: 1em; + /* margin-right: 4em; */ + margin-bottom: 10em; +} +.card-img{ + width: 3.5em; + height: 3.5em; + background-color: hsl(257, 27%, 26%); + border-radius: 50%; + padding: 1em; + text-align: center; + position: relative; + top: -3em; +} +.card-img img{ + margin-top: 0.5em; +} +.line +{ + width:80%; + height:0.4em; + margin-left: 8%; + background-color: hsl(180, 100%, 50%); + position: relative; + z-index: -1; + top: 10em; +} + +#card2{ + margin: auto; + margin-top: 3em; + +} +#card3{ + margin-right: auto; + margin-top: 6em; + margin-right: 0; + +} +.card-head{ + font-weight: 800; + font-size: larger; + margin-bottom: 1em; +} +.card-content{ + color: rgba(0, 0, 0, 0.501); +} + +.banner-boost{ + display: flex; + background: url(images/bg-boost-desktop.svg); + background-size: cover; + flex-direction: column; + width: 100vw; + height: 10em; + /* margin-left: -6em; */ + background-color: hsl(257, 27%, 26%); + align-items:center; + justify-content: space-evenly; +} +.banner-head{ + color: white; + font-size: larger; +} +#banner-get-started{ + background-color: hsl(180, 66%, 49%); + width: 10em; + height: 2.5em; + border-radius: 2em; +} +#banner-get-started:hover,#sign-up:hover,.intro-get-started:hover,#shorten-btn:hover{ + background-color: hsl(180, 69%, 77%); + color: white; +} +button:hover{ + cursor: pointer; +} +.history{ + display: flex; + flex-direction: column; + +} +.history-anchors{ + display: flex; + border-radius: 1em; + justify-content: space-between; + width: 80%; + height: 3em; + background-color: white; + text-decoration: none; + color: aqua; + + margin:2em auto; + margin-bottom: 0; +} +.history-anchors a{ + text-decoration: none; + margin-top: 0.5em; + color: black; + margin-left: 1em; +} + +.copy-btn{ + border: none; + background-color: white; + margin-right: 1em; +} + +.verify{ + position: sticky; + width: 15em; + height: 0.5em; + background-color: white; + border-radius: 2em; + bottom: 0em; + text-align: center; + padding: 1em 0 1.8em; + margin: auto; + z-index: 4; +} +.wrong{ + color:red; + border-color: red; +} +.wrong::placeholder{ + color: red; +} + +footer{ + background-color: hsl(260, 8%, 14%); + color: white; + width: 100%; + display: flex; + justify-content: baseline; + flex-wrap: wrap; +} +footer div{ + margin:8em 0; +} + + +.additional-links{ + display: flex; + margin-top: 7em; + line-height: 2em; + flex: 2; + flex-wrap: wrap; +} +.additional-links ul{ + + margin-right: 10%; + list-style-type: none; + +} + +.footer-company-name{ + font-size: 2em; + margin: 3em 10% 0 10%; + font-weight: bold; +} +.ul-head{ + font-weight: bold; + margin: 0; +} + +.additional-links ul li a{ + text-decoration: none; + color: rgba(255, 255, 255, 0.377); +} +.social-media{ + margin-right:10% ; +} +.social-media a{ + color: white; + font-size: 2em; + margin-left: 1em; +} +.options a{ + color: black; + text-decoration: none; +} +#home{ + border: none; + background-color: white; + display: none; +} +.mob-view{ + display: flex; +} +@media (max-width:1126px) { + .stat-cards ,.line{ + /* transform: scale(0.8); */ + margin-right:0 ; + margin-left:0 ; + width: 90%; + margin: auto; + } + +} +@media (max-width:1000px) { + .stat-cards ,.line{ + transform: scale(0.8); + width: 110%; + margin-left: -4em; + flex: 1; + } + .footer-company-name{ + margin-right: 10%; + margin-left: 5%; + } + footer div{ + margin-right: 0; + margin-left: 0; + } +} +@media (max-width:785px) { + .advance-stats{ + margin-bottom: 0em;; + } + .stat-cards{ + + transform: scale(1); + flex-direction: column; + align-items: center; + justify-items: self-start; + padding-bottom: 0.8em; + padding-top: 0; + + margin: -42em auto 0 auto; + } + #card2{ + margin: 1em 0 0 0 ; + } + #card3{ + margin:1em 0 0 0 ; + } + .cards{ + margin: 0; + } + .line{ + width:0.4em; + height:50em; + margin-left: 8%; + background-color: hsl(180, 100%, 50%); + position: relative; + z-index: -1; + top: 20em; + margin: auto; + } + + + .social-media{ + margin-right: 0; + } + .social-media *{ + margin-left: 0.2em; + /* margin-right: 0.2em; */ + } +} +@media (max-width:700px) { + .mob-view{ + display: none; + width: 60%; + height: 40%; + flex-direction: column; + align-items: center; + position: absolute; + right: 3em; + top: 3em; + z-index: 2; + background-color: hsl(257, 27%, 26%); + } + .options{ + display: flex; + flex-direction: column; + margin-bottom: 2em; + } + .options span{ + margin-top: 0.5em; + text-align: center; + font-weight: 500; + } + .options a{ + color:white ; + + } + .login-btns{ + align-items: center; + display: flex; + flex-direction: column; + margin-left: -1em; + margin-top: -1em; + } + #sign-up{ + width: 10em; + } + .top-btn{ + color: white; + } + #home{ + display: inline; + position: absolute; + right: 1em; + font-size: 1em; + } + .intro{ + display: flex; + flex-direction: column; + height: auto; + margin: auto; + transform: scale(0.6); + width: 130%; + height: 30em; + margin-left: -4.8em; + } + .intro-img{ + position: inherit; + width: 100%; + height: 100%; + margin-top: -11em; + margin-bottom: -5em; + transform: scale(0.8); + } + .bold-intro{ + font-size: 2em; + } + .intro-text{ + margin-top: -1em; + margin-bottom: 1em; + } + .link-input-bar{ + bottom: 10%; + } +} +.visible-menu{ + display: block; +} +.hidden-menu{ + display: none; +} +@media (max-width:640px) { + .link-input-bar{ + display: flex; + flex-direction: column; + } + #input-link{ + width: 90%; + margin: 0.4em auto; + + } + #shorten-btn{ + width: 100%; + } + .history-anchors{ + width: 100%; + } + footer{ + flex-direction: column; + align-items: center; + } + .additional-links{ + flex-direction: column; + + } +} \ No newline at end of file