url shortner

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

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/)

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='<i class="fa-solid fa-copy"></i>';
+    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<localStorage.length;i++)
+    {
+
+
+        let item=localStorage.getItem(`${count}`);
+        if(item==null)
+            break;
+        let box=document.createElement('div');
+        createLinkText(item,box);
+
+        createCopyBtn(item,box)
+        box.setAttribute('class','history-anchors')
+        count++;
+        history.prepend(box);
+
+    }
+
+}
+retrieveHistory();
+
+function geturl(){
+    let longUrl=inputLinkBox.value;
+    longUrl=longUrl.trim();
+    return longUrl;
+}
+async function shorturl(link) {
+    try{
+
+        let request=await fetch('https://api.tinyurl.com/create',{
+            method:'POST',
+            headers:{
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${tinyUrlApiKey}`
+            },
+            body:JSON.stringify({
+                url:link,
+            })
+        });
+        data=await request.json();
+
+        return data.data.tiny_url;
+    }
+    catch(e){
+        console.log(e);
+    }
+}
+
+
+
+async function copyToClipboard(text) {
+    await navigator.clipboard.writeText(text);
+    console.log("Text Copied Successfully")
+    await showVerify();
+}
+
+async function showVerify() {
+    let verify=document.createElement('div')
+    verify.innerText="Text Copied To Clipboard";
+    verify.classList.add("verify")
+    document.querySelector('body').append(verify);
+    setTimeout(()=>{
+        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
+    }
+})