DEV Community: Maxim Maeder

Programming Project Ideas

Maxim Maeder — Sat, 24 Jun 2023 09:44:58 +0000

The best way to learn is to do, and that's why I want to inspire you by presenting Ideas for programming projects that you could work on in your free time. This

Furthermore, I will provide you with starting points for some of the projects by linking to other articles by me that describe these projects.

So let's get right into it!

Recreating Famous Software or Famous UI Elements

My Web-Based Calculator.

Finding project ideas takes work, but you can get inspired by already existing software. Sometimes I think: "Wow this is cool but how was it made?". Let's go over some inspirations.

Visual Studio Code (Or any Code Editor): You could try to recreate syntax highlighting.
Microsoft Word: Word is a What you see is what you get (WYSIWYG) Editor based on HTML and CSS. Recreating something like this will be challenging but rewarding in the end.
Microsoft Excel: You could once again use your knowledge of HTML, CSS, and JavaScript to create your own table calculation program.
Splash/Wave Button: Google's Material Design is probably most well known for its special buttons that have this wave effect.
Quizzes: There are many quiz apps out there like Kahoot or Quizlet, and you can just as easily create a quiz by yourself about any topic you find interesting, or you can utilize a trivia API.
Explorer: If you know Python, you can use Tkinter to make your own file explorer.
OBS: OBS is helpful when you want to record what you do on your computer. And you can recreate this program with JavaScript since there is an API for Capturing Screens.
Paint: This is the Default drawing program on Windows, and It is not helpful, but it would be fun to recreate it so you could dive into the canvas API of JavaScript or use the graphics Library Pygame in Python.
Calculator: This one is pretty straightforward so you could add some advanced features to your calculator like a calculation history.

Now also for some honorable mentions.

Tabs, Accordions, Dropdowns, Sortable Tables, etc.

Essentially think of any UI Component.

Making Games

My Game Tile Jumper 2088.

Making games today is easier than ever. There are some fantastic tools out there that allow us to make awesome games with a small to no budget.

I like the Godot Game Engine, and when it comes to graphics, I boat well with paint.net and Adobe Illustrator.

Game Jams often have a topic that should serve as an inspiration and constraint that you can use to make a game in a short amount of time.

You could also use the Physics Power that these engines have to make simulations or other more test-oriented software like a planet simulation.

Once Again, you can get inspiration from the big AAA titles or other games.

Lastly, I don't know if it is just me, but I think making games is rewarding, especially seeing your friends play your games (and fail 😀).

Packages and Languages

Anime.js JavaScript Animation Library

Now some packages could inspire you to build something incredible.

Let's go over some JavaScript and Python Packages you could try out.

Anime.js: This is a simple and intuitive animation library for the front end. Its documentation is excellent, and you will quickly get the hang of it.
Three.js: This is a 3D Library that is a bit harder to learn but all the more rewarding.
Konva.js: I once asked myself how visual editors like Illustrator were made and then stumbled upon this little package that enables you to make editable 2D Canvas Scene with a wide variety of objects.
Monaco Editor: This is the Code Editor built into VS Code and it is awesome! You could, for example, make your own playground like jsbin.
Tkinter: This is a Python package to make User Interfaces. At first, it behaves rather clunky, but it is just fine for little projects.
pywebview: It Is somewhat of a combination of Python and JavaScript because it allows us to make a desktop app with Web Technologies and Python in the Backend to interact with the OS.

Make Notes of Things you Encounter

Lastly, I want to give you a tip.

Every time you encounter something you think is interesting or noteworthy, write it down! Make a list of all these things and store it in a safe location so you can, every once in a while when you are bored, look at your list of topics and should have new ideas for what to program.

I have a Private Github where I store a Markdown document with all the things I want to make once or that I think are fascinating.

Infinite Scrolling Website with JavaScript

Maxim Maeder — Thu, 22 Jun 2023 18:37:14 +0000

In this Tutorial, I will teach you how to make an infinite-scrolling website via the IntersectionObserver API in JavaScript. Our website will show random pictures of cats, so we will also learn how to fetch JSON from an API. Lastly, we add a little loading animation that plays while the image is loading to indicate to the user that more content is coming.

You'll find the Demo for the finished code here.

Markup of the infinite scrolling website

Let's start with the Markup of our little website. In the head, we need to add our script and link tags to the corresponding files. Mind the defer attribute added to the script tag, as its content should only run when the HTML has fully loaded. This way, we don't have to add scripts to the bottom of the page.

<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">

Next up, we need to add a div to our body to hold the Images / Items of our Timeline. It will be 4 column grid. We will also make it so some of the pictures span two rows if they are high.

<div class="pictures"></div>

JavaScript

Let's get to the script part of this Tutorial. We start by defining some variables that will aid us later. To ensure no duplicate images, we will keep track of their IDs.

const URL = 'https://api.thecatapi.com/v1/images/search'
const container = document.querySelector('.pictures')

const ids = [];

We are continuing by setting up our Intersection Observer. Its constructor receives a callback function and an Options Object.

const observer = new IntersectionObserver(observerCallback, {
    threshold: 1,
    rootMargin: '500px'
})

Later we go over the callback and what it does. Now let's talk about the two keys in the options object.

threshold: The Callback is called every time an observed element enters or exits the container, and with this attribute, we tell it how much of it has to be visible to be triggered. 1 means it has to be fully visible.
rootMargin: Define an invisible margin outside (or inside) the container that is also considered inside. ( This also means the threshold attribute does not show any effect in this case. I just added it, so you see it. )

Now the Observer won't do anything because we have to define elements that will be observed by it, and for this, we create the first image in the container with addPicture(). We later look at this function. Then we add the last child of the container to the observe via its observe(element) method.

addPicture()
observer.observe(container.lastChild)

Observer Callback

Let's go over the Callback function for the Observer. It will always receive a list of elements that either exited or entered the container. We get the first element of that list and check if its isIntersecting property is true. If that's the case, we will add another picture. Afterward, we unobserve this element via the unobserve(element) method. Lastly, we again add the last element in the container to the observed elements.

function observerCallback(entries) {
    if (entries[0].isIntersecting) {
        addPicture()
    }
    observer.unobserve(entries[0].target)
    observer.observe(container.lastChild)
}

Now, this only watches the last picture, and if it is visible, we know the user has scrolled too far down, and we have to add another image. This new picture will be the next observed element since it is the last. Conveniently newly created elements also trigger the Observer even though they were never outside the container.

`addPicture` Function

Now how does this addPicture function work? Firstly the function is created with the async keyword so it can await results from the fetch request, and we don't have to use .then(). Then inside the function, we start by creating a wrapper link element that will hold the image and the image itself. We also add the wrapper to the container now rather than later because the image may take longer to load.

async function addPicture() {

    const wrapper = document.createElement('a')
    wrapper.target = '_blank'

    const imgNode = document.createElement('img')

    wrapper.appendChild(imgNode)
    container.appendChild(wrapper)

    ...
}

Continuing, we get an image and some metadata about it with the getPicture function, which I will explain in a few moments. And we set the wrapper link and image source to the URL of the returned object.

let cat = await getPicture()

wrapper.href = cat.url
imgNode.src = cat.url

Lastly, we also check the height and width of the image, and in case their ratio is lower than 0.8, we set the style.gridRow attribute to span 2, which will make it take up two rows of the grid.

const ratio = cat.width / cat.height
if (ratio < 0.8) {
    wrapper.style.gridRow = 'span 2'
}

`getPicture` Function

Now to get the picture, we use the fetch function and the URL we defined above. You can go to the URL manually in your browser to see that it returns json. We also need to parse this json with the json method. In case the id in the json object is already in the list of ids, we throw an error. If not, we push the current id to the id list and return the json for the cat image. If any error happens, it will go to the catch block and return the getPicture function, which means that it will try to get a picture every time it does not succeed. There may be better approaches than this, but it works for now.

async function getPicture() {
    try {
        let r = await fetch(URL)
        let j = (await r.json())[0]
        if (ids.includes(j.id)) {
            throw new Error('Image Already Loaded')
        }
        ids.push(j.id)
        return j


    } catch (error) {
        return getPicture()
    }
}

Styling the infinite scrolling grid

Let's also style our website. I will only go over the grid and the animation.

For the container, we set its display to grid, and importantly, we set the grid-auto-rows property to 200px. This means we don't define how many rows there are. We instead say every row, regardless of how many there are, should be this high.

.pictures {
    display: grid;
    height: 100%;
    grid-template-columns: repeat( 2, 1fr );
    grid-auto-rows: 200px;
    gap: 20px;
}

Now for the individual images, we set object-fit to cover so the image will fill its whole container but don't overflow. For the animation, we then give it a gradient background and resize it so it is six times wider than usual. Lastly, we add an animation to it.

.pictures img {
    transition: all 0.2s ease-in-out;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 2px hsl(0, 0%, 70%);

    background: linear-gradient(90deg, hsl(0, 0%, 30%), HSL(0, 0%, 50%), HSL(0, 0%, 30%));
    background-size: 600% 100%;
    animation: gradient 1s ease infinite;
    animation-direction: alternate;
}

This animation is then defined with the @keyframes rule, where we edit the background-position property.

@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

Conclusion: Infinite Scrolling Website

We made it a website that shows a bunch of cats that get more if you scroll down. I hope that my explanation is of some use to you. Also, remember that I am a beginner, so you should always look for better ways to solve these problems.

Look at the Source Code in my GitHub Repository.

Visit the Demo.

Line Chart with Svelte

Maxim Maeder — Thu, 22 Jun 2023 15:15:32 +0000

In this Tutorial, we will create a Line Chart Svelte Component, which we can use in our Svelte Applications. We will use Scalable Vector Graphics (SVG) which are HTML. With SVG's help, we can create a Line Chart with a few lines of code. We will also use Svelte's reactive variables to make the Line Chart interactive.

We'll also style it with CSS / SCSS. Below you will see what we will create today.

Within the Component, we'll distribute the given data into a range to fit into the Diagram; this Behavior may be nothing for you, so your main takeaway could be how incredible SVG is and how easy it is to create Graphics with it.

First, we will create the Line Chart Component. Then we will use it in a Svelte Application.

Let's get started.

You'll find the Demo for the finished code here.

Line Chart Component

The Component consists of a script tag, a div container with an SVG, and a style tag.

Script of the Line Chart Component

Within our line-diagram.svelte file, we start by exporting a name and values property. The name property will be used as the title of the Diagram, and the values property will be used to draw the Diagram. The values property is an array of numbers.

Next up, we define the Diagram's height, width, and vertical padding; these numbers are mainly arbitrarily chosen to fit the Diagram. Because later down the line, we will fit all the data within this range.

Furthermore, we will get the highest and lowest value of the dataset, and calculate the proportions between our desired range and the range of the data. This will be used to scale the data to fit the Diagram.

This all sounds rather complicated, but bear with me here.

 <script lang="ts"> 
     export let name : string = '' 
     export let values : number[] 

     // These values are arbitrarily chosen to fit the Diagram 
     let height = 50; 
     let width = 100; 
     let padding = 5; 

     $: highestValue = values.reduce((a, b) => Math.max(a, b)) 
     $: lowestValue = values.reduce((a, b) => Math.min(a, b)) 

     $: multiplier = ( height - 2 * padding ) / (highestValue - lowestValue); 

     ... 
 </script>

Lastly, within the script tag, we'll define a reactive variable, path which will be used to draw the Diagram. Then we use a reactive block to calculate the path. The path is a string containing the SVG Path commands to draw the Diagram.

 let path = '' 
 $: { 
     path = "M0 " + (height); 
     for (let i = 0; i < values.length; i++) { 
         let yValue = height - (((values[i] - lowestValue) * multiplier) + padding) ; 

         let xValue = i / (values.length - 1) * width; 

         path += " L " + xValue + " " + yValue; 
     } 
     path += " L" + width + " " + height; 
     path += " L 0 " + height; 
     path += " Z"; 
 }

HTML of the Line Chart Component

Next, we will create the HTML for our Component, consisting of a div container with an SVG. The SVG has a viewBox which defines the size of the SVG. The viewBox is a string that contains the x and y position of the top left corner and the width and height of the SVG. We will use the width and height variables we defined earlier.

We also set the preserveAspectRatio attribute to none so the SVG will scale to fit the container.

 <div class="container"> 
     <svg  
         class="diagramm_svg" 
         viewBox={"0 0 " + width + " " + height} 
         preserveAspectRatio="none" 
         > 

         <!-- More to Come --> 

     </svg> 
 </div>

We start by defining a defs tag within the SVG. The defs tag is used to define SVG Elements, which can be reused within the SVG. In our case, we will define a linear gradient which we will use to fill the line of the Diagram.

After that, we create this line with a path element. The path is defined by the path variable we defined earlier. This path element uses the gradient by referencing it by its id in the fill attribute.

 <defs> 
     <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> 
         <stop stop-color="hsl(200 100% 50%)" offset="0%" /> 
         <stop stop-color="hsl(200 100% 20% / 0.2)" offset="100%"/> 
     </linearGradient> 
 </defs> 

 <path d={path} class="line" fill="url(#gradient)"/>

Lastly, we add text labels to our Diagram. Mind the text-anchor and dominant-baseline attributes.

 <!-- Show Labels --> 
 <text x={width - 2.5} y={height - padding} class="label_text" text-anchor="end" dominant-baseline="middle">{ Math.round(lowestValue) }</text> 
 <line x1={width - 2} y1={height - padding} x2={width} y2={height - padding} class="label_line"></line> 

 <text x={width - 2.5} y={padding} class="label_text" text-anchor="end" dominant-baseline="middle">{ Math.round(highestValue) }</text> 
 <line x1={width - 2} y1={padding} x2={width} y2={padding} class="label_line"></line> 

 <text x="2" y={padding} class="title_text">{ name }</text>

CSS of the Line Chart Component

Lastly, we add some CSS to our Component. We will use SCSS for this. We start by defining the container and the SVG. We also add a border to the SVG so we can see the size of it. I won't go over it, but you see the code below.

 .container { 
     background-color: hsl(200 50% 20%); 
     background: linear-gradient(150deg, hsl(200 50% 20%), hsl(200 50% 10%)); 
     height: 100%; 
     display: flex; 
     flex-direction: column; 
     justify-content: center; 

     .diagramm_svg { 
         width: 100%; 
         height: 100%; 

         .label_line { 
             stroke-width: 0.3px; 
             stroke: hsl(200 0% 100% / 0.3); 
         } 

         .title_text { 
             font-size: 3px; 
             fill: white; 
             font-weight: 600; 
         } 

         .label_text { 
             font-size: 2px; 
             fill: white; 
             text-align: right; 
         } 
     } 
 }

Using the Line Chart Component

Now how do we use this Component? To demonstrate this, I will use the Weather API that I have used in this article to make a simple diagram.

We start by fetching the API URL and getting the json for it. We can then put this data into the weatherDataPromise variable.

 async function getWeatherData() { 
     const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m`) 
     return await response.json() 
 } 
 let weatherDataPromise = getWeatherData()

Lastly, we use the svelte await block to wait for the promise to resolve. We then pass the data to our LineDiagram Component.

 <div class="container"> 
   <h2>My Cool Line Diagram</h2> 

   <br>  
   <div class="weather_container"> 
     <!-- Await --> 
     {#await weatherDataPromise} 
       <p>Waiting for weather data...</p> 
     {:then data} 
       <LineDiagram values={data.hourly.temperature_2m} name="Weather Data"/> 
     {:catch error} 
       <p style="color: red">{error.message}</p> 
     {/await} 
   </div> 
 </div>

Conclusion

That's it; I hope you had a good time reading and that you learned something new. As you see, SVG is mighty when used correctly and dynamically. You can, for example, make a Responsive Dog.

Calculator with History Function in HTML, CSS, and JavaScript

Maxim Maeder — Wed, 14 Dec 2022 13:08:48 +0000

Idea

In this Tutorial, we will make a simple Calculator with a history function utilizing JavaScript, HTML, and CSS. We will use the eval function to evaluate the expression, but keep in mind that this is somewhat dangerous and it should be used with great care in Production Environments. We will also make use of the Window.localStorage API to store a list of expressions that were previously typed into the calculator.

Visit the Demonstration
Look at the Code

HTML

Let's start with the Markup of the Calculator as it defines the Buttons and possible tokens.

We start by wrapping everything in a div with the container class then we have to divs as children that act as two columns. the left side will be the calculator itself and the right side will show the History. For the input and output, we use the input element and we disable it for the output. We do it this way so the elements always have the same height regardless of the current content.

After that, we have the buttons of the Calculator that are once again located inside a container that will align them in a grid. Later we will connect the buttons and mostly insert their content into the input and evaluate that.

We then also add a right-side container that will hold the history.

<div class="container">
  <div class="leftSide">
    <input type="text" id="input" placeholder="Input">
    <input type="text" id="output" placeholder="Output" disabled="true">

    <div class="buttons">
      <button class="greyButton">7</button>
      <button class="greyButton">8</button>
      <button class="greyButton">9</button>
      <button>*</button>
      <button>+</button>

      <button class="greyButton">4</button>
      <button class="greyButton">5</button>
      <button class="greyButton">6</button>
      <button>/</button>
      <button>-</button>

      <button class="greyButton">1</button>
      <button class="greyButton">2</button>
      <button class="greyButton" class="greyButton">3</button>
      <button>(</button>
      <button>)</button>

      <button class="greyButton">0</button>
      <button class="greyButton">.</button>
      <button class="blueButton">=</button>
      <button>CLEAR</button>
      <button>DEL</button>
    </div>
  </div>
  <div class="rightSide">
    <h4>HISTORY</h4>
    <div class="historyContainer">

    </div>
  </div>
</div>

JavaScript

Let's now get to the JavaScript of the Calculator. Bear in mind that this code will be a wee bit convoluted since we make a calculator while also implementing a history function for it.

We start by saving some important elements to variables so we can use them later and so we don't have to query them a bunch of times.

const buttons = document.querySelectorAll('.buttons button')
const inputEl = document.querySelector('input')
const output = document.querySelector('#output')
const historyContainer = document.querySelector('.historyContainer')

Then we set a name for the storage of the history. We then also check if there is something at this name inside local storage by using the getItem() method. In case this value is null we set this index to an empty array. The local storage is basically an object which survives the page and the browser reloads but it does not support other objects so we have to turn them to json strings with JSON.stringify(). Lastly, we call the refreshHistory() Function that will redraw the items in the history column, we will later look at what it does exactly.

const STORAGE_NAME = 'history_v4';

if (localStorage.getItem(STORAGE_NAME) == null) {
    localStorage.setItem(STORAGE_NAME, JSON.stringify([]))
}

refreshHistory()

We continue by looper over all the button elements. Inside the loop, we save the innerHTML of the Elements to a variable and we add an event listener to it for the pointerdown event which triggers if someone clicks or taps the element.

for (let button of buttons) {
    const symbol = button.innerHTML

    button.addEventListener('pointerdown', () => {
        ...
    })
}

Inside the event listener Callback, we check the elements for special meaning. For = we want to save the current expression and push the output content into the input element, so we get the History List by using localStorage.getItem(key) and JSON.parse(str). We then check if the element is already in the history and if it's not, we insert it. After that, we also need to set the value in the local Storage with localStorage.setItem(key, value).

Now if the pressed button had the value DEL we delete one character from the end and if it was CLEAR we clear the input of any content. In any other case, we simply add the character to the input. Lastly, we call a function that will registrate the changes made to the input element.

// Inside event callback

if (symbol == '=') {

    const historyElements = JSON.parse(localStorage.getItem(STORAGE_NAME))
    if (!historyElements.includes(inputEl.value)) {
        historyElements.push(inputEl.value)
    }
    localStorage.setItem(STORAGE_NAME, JSON.stringify(historyElements))


    inputEl.value = output.value
    refreshHistory()
}
else if (symbol == 'DEL') {
    inputEl.value = inputEl.value.slice(0, inputEl.value.length - 1)
} else if (symbol == 'CLEAR') {
    inputEl.value = ''
} else {
    inputEl.value += symbol;
}

registrateChange()

Registrate Changes

Then we bind the input event of input elements to the registrateChange function and we define it. We simply evaluate the value in the input and we insert the result into the output.

inputEl.addEventListener('input', registrateChange)

function registrateChange() {
    let newValue = eval(inputEl.value) || ''

    output.value = newValue
}

Refresh History Function

Let's also go over the refreshHistory function, which will redraw the content of the history column. So we first empty the container and then we get the history list from local storage and then we loop over each item and we add a div to the container for each expression.

function refreshHistory() {
    historyContainer.innerHTML = ''

    let historyElements = JSON.parse(localStorage.getItem(STORAGE_NAME))

    for (let i = historyElements.length - 1; i >= 0; i--) {

        const div = document.createElement('div')
        div.className = 'historyItem'

        let evaluated = ''

        try {
            evaluated = eval(historyElements[i])

        } catch (error) {
            evaluated = 'INVALID RESULT'
        }

        div.innerHTML = `
            <div>${truncate(historyElements[i], 14)}</div>
            <div>${truncate(evaluated, 14)}</div>
        `

        historyContainer.appendChild(div)

        div.addEventListener('pointerdown', () => {
            inputEl.value = historyElements[i];
            registrateChange()
        })
    }
}

CSS

Below you see the CSS code of the Program, I will not go further into detail.

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');

#input,
#output {
    padding: 0.5em;
}

#output {
    text-align: right;
    background-color: rgb(30, 30, 30);
}

* {
    box-sizing: border-box;
}

h6 {
    margin: 0
}

body {
    font-family: 'Ubuntu Mono', monospace;
    font-size: 200%;
    height: 100vh;
    margin: 0;
    background-color: rgb(50, 50, 50);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: none;
}

.container {
    overflow: none;
    width: 100vw;
    height: 100vh;
    background-color: rgb(40, 40, 40);
    box-shadow: 0 0 4px rgb(0, 0, 0);
    display: grid;
    grid-template-columns: 1fr 250px;
}

.leftSide {
    display: flex;
    flex-direction: column;
}

.rightSide {
    background-color: rgb(50, 50, 50);
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.rightSide h4 {
    padding: 0.5em;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

@media screen and (max-width: 700px) {
    .rightSide {
        display: none;
    }
    .container {
        grid-template-columns: 1fr;
    }
}

.historyContainer {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

button,
input {
    font: inherit;
    color: inherit;
    background-color: inherit;
    border: none;
}

.buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    flex-grow: 1;

}

.buttons button {
    border: 1px solid rgb(60, 60, 60);
}

.blueButton {
    background-color: rgb(81, 81, 164)
}

.greyButton {
    background-color: rgba(100, 100, 100, 0.2)
}

.historyItem {
    border-bottom: 1px solid rgb(100, 100, 100);
    padding-left: 1em;
    padding-right: 1em;
    color: grey;
    font-size: 60%;
}

.historyItem>*:first-child {
    padding-top: 0.5em;
}

.historyItem>*:last-child {
    text-align: right;
}

::-webkit-scrollbar {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.2);
    transition: background-color 0.3s ease;
}

Conclusion

Visit the Demonstration

Excellent! You have successfully created a Calculator using HTML, CSS, and JavaScript code!

Keep in mind that I am also just a beginner, so it could be that my way of solving these problems is not the best or that I use functions or features that aren't advised to use. Always ask questions and try to solve problems your way!

Split Container Web Component

Maxim Maeder — Wed, 05 Oct 2022 13:02:30 +0000

let us learn together how to make a custom HTML element with JavaScript by making a resizeable split container.

Idea

Not long ago I learned that it's possible that one can make custom HTML elements with JavaScript and today I want to make a resizeable split container with you to learn how to make custom web components. Keep in mind that I also did this for the first time and I am just a beginner who documents what he learns, so come along!

Let's do this!

Class

Now how exactly does one make a custom HTML Element? Its really easy we just have to make a class that extends HTMLElement or any other Predefined Element and we have to add this class to the custom elements with:

customElements.define('hsplit-container', splitContainer)

The first argument here is the name that will be used in the HTML and the second one is the class. Now inside this class, we can have several functions that will be called by the browser in the lifetime of the element. The one we use here is connnectedCallback which is called when the element is created. Most of the Script happens here so let's go over it.

Connected Function

So inside our split container class, we define a function to handle setting everything up. So we start by getting attributes from the element itself and storing them inside an object called config. in this case this refers to the element so we can access and edit properties like innerHTML like normally. Normally || is used to check if either of two conditions is true but actually, it returns the first value that is true. So we can use this syntax to easily create a default value for each attribute because if it was not set getAttribute will return null.

class splitContainer extends HTMLElement {
    connectedCallback() {
        this.config = {
            min: this.getAttribute('min') || 20,
            max: this.getAttribute('max') || 80,
            start: this.getAttribute('start') || 50,
            draggerwidth: this.getAttribute('draggerwidth') || 50,
        }
    }
    ...
}

Shadow DOM and Templates

Next up we create a shadow DOM which is just HTML normally hidden that is used when a component needs many elements or a restructure of given elements. We make this shadow DOM with the attachShadow() function that returns an object that has the same properties as any element.

Inside there we can define styles slots and other elements.

const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = `...`

The first thing we insert into the shadow DOM is the custom HTML in our case this is a slot element followed by a div with another div as a child and in the end another slot.

<slot name="first"></slot>
<div id="dragger-container">
    <div></div>
</div>
<slot name="second"></slot>
...

The divs in the middle will represent the dragger. The slots are used to rearrange elements in the original Structure to fit our needs. The Markup will look something like this, where we have the root custom element with two children representing the two sides of the split. But we want to insert dragger in between and that's why we use the shadow DOM. The Developer Tools normally don't show shadow elements so this has to be enabled.

<hsplit-container>
    <div>
        Left Side
    </div>
    <div>
        Right Side
    </div>
</hsplit-container>

The First slot element will have the first element inside the hsplit-container and the second will have the second.

We later also go over the CSS that is also inserted into this shadow dom so keep that in mind.

Continuing we search for the dragger inside the shadow element and we save the reference. We then set its width according to the config object. But then we get the actual width in pixel with the el.getBoundingClientRect() function that return box informations about any element. We will use these functions often in this Tutorial. Last but not least we define a variable that is used to tell if the dragger has been clicked or relased.

// Getting the Dragger
this.dragger = shadow.querySelector('#dragger-container')
this.dragger.style.width = this.config.draggerwidth + 'px'

this.config.draggerwidth = this.dragger.getBoundingClientRect().width
this.draggerClicked = false

Then we also save the two nested elements that are split to variables and we set the slot attribute for each of them so the are rearranged properly.

// Get the two children
this.firstEl = this.children[0]
this.lastEl = this.children[1]

// the Slot Attribute for both Elements
this.firstEl.setAttribute('slot', 'first')
this.lastEl.setAttribute('slot', 'second')

Then we connect some events to some functions. For the Drag we want it to work so the user has to press on the dragger but can then leave it to drag it along. That is why we set the pointerdown (Click) to the dragger but pointerup and pointermove to the document. For the movement we call a function called moveCallback, we will go over it later.

this.dragger.addEventListener('pointerdown', (ev) => { this.draggerClicked = true; })
document.addEventListener('pointerup', () => { this.draggerClicked = false; })
document.addEventListener('pointermove', (ev) => { this.moveCallback(ev) }

Movement Callback

Let's go over the function that handles movement. In it, we first check if the dragger is clicked if that's not the case we return essentially doing nothing.

moveCallback(ev) {
    if (!this.draggerClicked) return

    ...
}

if that is the case we continue by saving the x position and width to variables and we use this info and the x position of the click to calculate how far to the left inside the element the mouse pointer is currently in percent. We then also clamp this value to the max and min width.

        const x = this.getBoundingClientRect().x
        const width = this.getBoundingClientRect().width

        // Calcualate
        const perc = ((ev.x - x) / width) * 100
        const percClamped = this.clamp(perc, this.config.min, this.config.max)

We define this function somewhere in the class, and it looks like this.

clamp(val, min, max) {
    if (val > max) return max
    if (val < min) return min
    return val
}

Anyway, we then continue by setting the width for both inserted elements and the left property for the dragger. To do this we use the calc function in CSS and we need to make adjustments so the dragger is placed so its middle is at the mouse position and so on.

this.dragger.style.left = `calc(${percClamped}% - ${this.config.draggerwidth / 2}px)`
this.firstEl.style.width = `calc(${percClamped}% - ${this.config.draggerwidth / 2}px)`
this.lastEl.style.width = `calc(${100 - percClamped}% - ${this.config.draggerwidth / 2}px)`

CSS

Let us also go over the CSS that is defined in the Shadow DOM. I don't want to go into detail that much, I just want to point out a few things. We can select the element itself. with :host and slotted styles are made within::slotted(selector). We need to set the position to absolute and right to zero for the second div so it's on the right side.

:host * {
    box-sizing: border-box;
}

:host {
    background-color: rgb(255, 255, 255);
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    position: relative;
}

::slotted(div) {
    box-sizing: border-box;
}

::slotted(div:last-child) {
    position: absolute;
    right: 0
}


#dragger-container {
    height: 100%;
    width: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
    opacity: 0.1;
    left: calc(50% - 1em - 2.5px);
    transition: opacity 0.2s ease;
    position: absolute;
    touch-action: none;
}

#dragger-container:hover {
    opacity: 0.3;
    cursor: ew-resize;
}

#dragger-container:active {
    opacity: 1;
    cursor: ew-resize;
}


#dragger-container div {
    background-color: rgb(0, 149, 255);
    width: 5px;
    height: 100%;
    border-radius: 99px;
    transition: width 0.2s ease
}

#dragger-container:active div {
    width: 10px;
}

HTMl Usage

Now that we have the code we can use the element in our HTML with its custom name like this.

<hsplit-container>
    <div>
        Content
    </div>
    <div>
        Content
    </div>
</hsplit-container>

Showcase

Visit the Demonstration
Look at the Code

Conclusion

Awesome! We have created a custom HTML Element with JavaScript now how could we use this newly gained knowledge?

Tabs with HTML, SASS, and JS

Maxim Maeder — Thu, 22 Sep 2022 04:17:42 +0000

Original Post

Learn how to make functional tabs for your website with HTML, Sass, and JavaScript.

Idea

This Tutorial will make functional tabs with HTML, SASS, and JavaScript. We will make it so you can add the CSS and js file to the page and apply some classes to nested divs for it to work. We will also try to make it semantically correct by adding ARIA Attributes to the formal elements. However, don't take this too seriously because I am unsure if I did it correctly. Still, it is always essential to give your HTML meaning.

Either way, Let us get started!

HTML of the Tabs

The Potential structure of such tabs could look something like this. We first would have a div with the class tabs and then two divs inside, one with the class tab-registers and one with the class tab-bodies. The First button inside tab-register is connected to the first item in the tab-bodies element. We can optionally give one of the buttons the class active-tab so it starts as the active tab.

<div class="tabs">
    <div class="tab-registers">
        <button>Tab 1</button>
        <button>Tab 2</button>
        <button>Tab 2</button>
    </div>
    <div class="tab-bodies">
        <div>
            ...
        </div>
        <div>
            ...
        </div>
        <div>
            ...
        </div>
    </div>
</div>

JavaScript of the Tabs

We start by getting an HTML collection of all elements with the tabs class, and we loop over it after we have turned it into a list using Array. from(list_like). The call back for the loop takes the element itself and the Index. We will need the Index to identify this tab group uniquely.

Array.from(document.querySelectorAll('.tabs')).forEach((tab_container, TabID) => {
    ...
})

Then we save some of the essential elements to variables, namely the tabs-registers and tab-bodies elements.

    const registers = tab_container.querySelector('.tab-registers');
    const bodies = tab_container.querySelector('.tab-bodies');

Continuing, we get the active register, but because it could be undefined, we set it to the first button if that's the case. Either way, we add the class active-tab to the element.

    let activeRegister = registers.querySelector('.active-tab');
    activeRegister = activeRegister ? activeRegister : registers.children[0]
    activeRegister.classList.add('active-tab')

After that, we call the changeBody() function, which will, as it says, hide all bodies except the one corresponding to the current register/tab. We also call this function every time the tab is changed.

    changeBody()

Now we also loop over all the elements directly inside the registers container. These are the buttons/Tabs. We then set the aria-controls attribute, which says what other element is controlled by this one. We also have to set an id for the corresponding body. We use the tab id and the Index of the tab button to build a unique id.

Then we add an event listener to the button, remove the active tab class from the current register, and replace the content of the variable with the new current register, so we also need to add the active tab class. Last, we call the changeBody() function.

    Array.from(registers.children).forEach((el, i) => {
        el.setAttribute('aria-controls', `${TabID}_${i}`)
        bodies.children[i]?.setAttribute('id', `${TabID}_${i}`)

        el.addEventListener('click', (ev) => {
            activeRegister.classList.remove('active-tab')
            activeRegister = el;
            activeRegister.classList.add('active-tab')
            changeBody()
        })
    })

Now to the changeBody() function. In it, we once again loop over the registers children. We also get the Index of each iteration. Then if the body at that Index exists, we decide whether its display property is block or none depending on the current register. We do this check so there can be more registers than bodies. Then we also set the aria-expanded attribute for the button, which tells the user if the content of this panel or button that leads to a panel is expanded or not.

function changeBody() {
        Array.from(registers.children).forEach((el, i) => {
            if (bodies.children[i]) {
                bodies.children[i].style.display = el == activeRegister ? 'block' : 'none'
            }

            el.setAttribute('aria-expanded', el == activeRegister ? 'true' : 'false')
        })
    }

Sass of the Tabs

Below you see the sass/CSS code of the program. We won't go into detail.

.tabs 
    font-family: 'Lucida Sans', sans-serif
    font-size: 20px


    .tab-registers 
        display: flex
        background-color: RGB(255, 255, 255)


    button 
        padding: 0.5em
        background-color: RGB(255, 255, 255)
        border: none
        font: inherit


    .tab-registers button:hover 
        cursor: pointer


    .tab-bodies 
        padding: 0.5em
        background-color: RGB(235, 235, 235)
        flex-grow: 1
        overflow-y: auto


    button.active-tab 
            background-color: rgb(235, 235, 235)

Showcase

Visit the Demo
Visit the Repository

Conclusion

Excellent! You have successfully created functional tabs using! See how you can add more features to this program, such as dynamically adding and deleting tabs.

Keep in mind that I am also just a beginner, so it could be that my way of solving these problems is not the best or that I use functions or features that aren't advised. Always ask questions and try to solve problems your way!

Display JSON with HTML, CSS, and Javascript

Maxim Maeder — Tue, 20 Sep 2022 04:24:27 +0000

Learn how to display nested JavaScript Objects the same way the console in the developer tools does.

Idea

The most used tool by any Web Developer would be probably the Dev Tools that are built into the browser for os programmers to analyze the HTML and CSS of our pages. This Tool also shows us the outputs by console.log and if the output is more complex than a string or number. It will show a tree view of the object where keys are highlighted by their data type. Below you see the console of the browser Microsoft edge where the window object has been printed out. As you see we could further expand this view into the nested object it has, and today we will try to implement this in HTML with JavaScript and CSS. We will make a recursive function that will make the HTML of any given object. This could be useful for debugging purposes or for the sake of showing how to display any tree structure.

Let us get started!

JavaScript Code

Let us start with the JavaScript Code, which will just entail a function that will call itself for each branch of a tree or object.

Arguments

The function is set up to have three arguments. The first one is the root, which means the root element where the content is filled in. For each function call, this root will change so it is deeper into the tree. The data will be the object or array that should be displayed. And lastly, the depth just registers how deep the function call is into the object. This is needed for two reasons; Maybe we want to set a max width and maybe the behavior should be special for the first layer.

function renderJson({root = '', data, depth = 0} = {}) {
    ...
}

Here we use object destructuring so we can have parameters for this function that can be given in any order. We also set a default Value of {}.

Setting up the Highest Root Element

Now inside the function, we first check if the depth is zero and if the root parameter is empty. This would mean that we are at the start of our object, so we have to create the root first. It simply consists of a ul element inside a pre, we then set the root to be the ul element.

    if (depth == 0 && root == '') {
        const pre = document.createElement('pre')
        const ul = document.createElement('ul')

        pre.appendChild(ul)
        root = ul
        document.body.appendChild(pre)
    }
    else {
        root.innerHTML = ''
    }

Looping over the Properties

Then we loop over the properties of the object that sits inside the data variables. In the loop, we check if the current value at the specified key is an object and not null. So inside here we have code that handles nested objects and arrays, but if that's not the case this means its a primitive so we can just display it.

for (d in data) {
    if (typeof data[d] == 'object' && data[d] != null) { /* Handling Objects */ }
    else { /* Handling Primitive Values */ }
}

Let's first go over the primitives inside the else statement, because we simply show the value. So we first get the type of data at the key. Then we create a li element, that will hold this value. The Display value will hold the actual displayed value. Then we check if the type is object with a switch case. Null is the only object that is displayed that is why we have to do it this way. If it's not null we simply put in the value from the data.

let currentType = typeof data[d]
let el = document.createElement('li')
let display = null

switch (currentType) {
    case 'object':
        display = 'null'
        break;
    default:
        display = data[d]
        break;
}

Showing Primitives

Then we create three span elements. the first one holds the key and the second one holds the value. The third one holds additional info about the value like its length, boolean value, and its type. We add the content and a class to each one of these spans. Then we also append all these elements at the correct spots.

let titleSpan = document.createElement('span')
let contentSpan = document.createElement('span')
let detailsContentSpan = document.createElement('span')

titleSpan.innerText = `${d}: `
titleSpan.classList.add('titleStyle')

contentSpan.innerText = display
contentSpan.classList.add(currentType)

detailsContentSpan.innerText = `   Type: ${currentType}; Length: ${display?.length}; Boolean: ${Boolean(display)}`
detailsContentSpan.classList.add('moreDetails')

el.appendChild(titleSpan)
el.appendChild(contentSpan)
el.appendChild(detailsContentSpan)

root.appendChild(el)

Showing Objects

Now, what if the value is another Object or Array? In that case, we make a detailed element that can be expanded to show the content. The details tag also needs a summary tag that holds the title of the content, so we also make that.

const nestedData = data[d]

const detailsElement = document.createElement('details')
const summaryEl = document.createElement('summary')
summaryEl.classList.add('titleStyle')

detailsElement.appendChild(summaryEl)

Then we find out if the object is an Array. If that's the case we show its length. This whole information will be shown behind the object in paranthases.

let appendedString = Array.isArray(data[d]) ? `Array, ${data[d].length}` : 'Object'

summaryEl.innerHTML = `${d} <span class="titleStyleDescription">(${appendedString})<span></summary>`

Then we create a new root element that is a ul. We append this to the details element.

const newRoot = document.createElement('ul')

detailsElement.appendChild(newRoot)

root.appendChild(detailsElement)

Now we haven't actually inserted the nested content into the new lower root. For optimization purposes, we only insert the content if the user opens the details element. So we connect the click event of the summary element, and we check if the details element is open or closed. Now it is closed we clear it but if it is open we call this function itself with the new root and the nested data. This can go on as deep as possible.

summaryEl.addEventListener('click', () => {
    if ( !detailsElement.hasAttribute('open') ) {
        renderJson({
                root: newRoot,
                data: nestedData,
                depth: depth + 1
            }) 
        clicked = true
    }
    else {
        newRoot.innerHTML = ''
    }
})

And that's it a recursive function allows us to show objects. We could simply call the function with any given object and it will be shown.

renderJson({data: document})

CSS Code

Now we can also style the displayed objects. We define some variables inside the root element and we change them if the user has dark mode enabled. We can do this with @media (prefers-color-scheme: dark).

:root {
    --bg: rgb(255, 255, 255);
    --titleStyle: rgb(121, 121, 121);
    --moreDetails: rgb(200, 200, 200);
    --string: orange;
    --number: rgb(0, 76, 255);
    --boolean: rgb(191, 0, 255);
    --function: rgb(109, 176, 137);
    --objectNull: rgb(176, 142, 109);
    --undefined: rgb(176, 142, 109);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: rgb(40, 40, 40);
        --titleStyle: rgb(170, 170, 170);
        --moreDetails: rgb(140, 140, 140);
        --string: rgb(223, 177, 93);
        --number: rgb(119, 152, 229);
        --boolean: rgb(206, 142, 227);
        --function: rgb(109, 176, 137);
        --objectNull: rgb(176, 142, 109);
        --undefined: rgb(176, 142, 109);
    }
}

Now we also apply some styles to the body, any ul and pre's. We also hide the spans that show more details about the primitive by default so it only shows when the user hovers over its li elment.

body {
    margin: 0
}

ul {
    list-style-type: none;
    padding-inline-start: 20px;
}

pre {
    padding: 1em;
    margin: 0;
    background-color: var(--bg)
}

li:hover .moreDetails {
    display: unset
}

.moreDetails {
    display: none;
    color: var(--moreDetails)
}

We then just apply some styles to the different data types that can be encountered in such an object.

.titleStyle {
    color: var(--titleStyle)
}
.titleStyleDescription {
    color: var(--moreDetails)
}


.string {color: var(--string);}
.string::before,.string::after {content: '"';color: var(--string)}
.number {color: var(--number);}
.boolean {color: var(--boolean)}
.function {color: var(--function)}
.object {color: var(--objectNull)}
.undefined {color: var(--undefined)}

Showcase

Showcase GIF

Visit the Demonstration
Look at the Code

Conclusion

Excellent! You have successfully displayed JSON using JavaScript code!

Padding and Margin Classes with Sass

Maxim Maeder — Fri, 16 Sep 2022 05:52:52 +0000

Original Post

How to quickly make padding and margin classes utilizing sass and its looping possibilities.

Sometimes one just needs margin and padding classes for left, right, top and bottom and we could make these ourselves but that would be tedious and take a long time. We can however use SASS to quickly make this CSS. SASS is a CSS Pre-Processor, which means it is not valid CSS but will generate it. SASS just others other useful features such as string functions, variables, and loops.

Let us take a look at a simple example to make margin and padding class in all directions from 0ems to 7ems.

Let us start by defining two lists, one holds the em range and one the direction strings.

$ems: 0, 1, 2, 3, 4, 5, 6, 7
$directions: "", "-bottom", "-top", "-left", "-right"

In SASS lists and the variables are defined in this manner. $variableName: itemOne, itemTwo, ... . No need to terminate with a ;

Next, we loop over the two lists in a nested manner. So for every em we also go through every direction.

@each $em in $ems 

    @each $dir in $directions

After that we get the second letter from the direction so for -top that means t, we do this so the class name does not include the whole word. We can do this with the str-slice() function which takes the string to slice, the starting point, and the ending point. SASS Lists and Strings start at 1 and not 0 as most programming languages do, so keep that in mind.

        $dir-in-rule: str-slice($dir, 2, 2)

Now let us start with making classes. Here comes the powerful part about SASS because we can insert the variables into the selectors, rules, and values. So we add the shortened $dir-in-rule to .m and after it, we add the em amount. So this will result in classes that are called this. mt-1 or mb-5 which should mean a margin-top of one em and margin-bottom of 5 em. Because we have also defined the direction "" we will also get something like m-3 which means margin in all directions.

To insert variables in selector and rules we have to do it this way: #{$variableName}. For the value, we simply write down the variable name with the $ sign. We can also concatenate normal strings like the em with +

We also do this for padding which is done in a similar manner.

        .m#{$dir-in-rule}-#{$em} 
            margin#{$dir}: $em + em

        .p#{$dir-in-rule}-#{$em} 
            padding#{$dir}: $em + em

Now this code won't work by itself, we have to convert it to valid CSS first this is done by transpilling or converting. This converter is really good. After putting in the code there it should result in something like this.

.m-0 {
  margin: 0em; }

.p-0 {
  padding: 0em; }

.mb-0 {
  margin-bottom: 0em; }

.pb-0 {
  padding-bottom: 0em; }

.mt-0 {
  margin-top: 0em; }

... /* There should be 80 Classes like this */

Conclusion

Excellent! You have successfully created margin and padding classes using SASS code! See how you can make more with this knowledge!

Full Code

$ems: 0, 1, 2, 3, 4, 5, 6, 7
$directions: "", "-bottom", "-top", "-left", "-right"

/* Paddings and Margins */
@each $em in $ems 

    @each $dir in $directions 

        $dir-in-rule: str-slice($dir, 2, 2)

        .m#{$dir-in-rule}-#{$em} 
            margin#{$dir}: $em + em

        .p#{$dir-in-rule}-#{$em} 
            padding#{$dir}: $em + em

Weather App with HTML, SASS, and JavaScript

Maxim Maeder — Wed, 14 Sep 2022 05:46:14 +0000

Original Post

Learn how to make a Simple App showing Temperatures for the next seven days. We learn about SVG and API fetching.

Before we get into it, I want to stress that I am no JavaScript Pro; therefore, it may be that my practices are not the best or even the worst. Feel free to contact me in any way and tell me better ways to do things!

Idea

Today we will make a little Website that shows us the hourly temperatures in the next seven days for a certain choosable city. We will make the graph ourselves using the power of SVG. We get the data from the Open Meteo API (Licence). Before we get into coding, we look at how SVG will help us and what kind of data the API returns.

Live Demo

SVG

Scalable Vector Graphics are fantastic. They look good in all sizes and can easily be made programmatically because they are HTML tags. Below you see a simple SVG tag that will show a polygon. We will use this tag for our graph and line and text. In the program, we add the points.

<svg height="210"  width="500">  
    <polygon points="200,10 250,190 160,210"/>  
</svg>

API

We will request the hourly temperatures in the next seven days from the weather temperatures. We request an URL that looks something like this. The coordinates will be inserted.

https://api.open-meteo.com/v1/forecast?latitude=30.0&longitude=30.0&hourly=temperature_2m

Such a request will return a JSON string with the information we need.

{
    "latitude": 30.0,
    "longitude": 30.0,
    "generationtime_ms": 1.3890266418457031,
    "utc_offset_seconds": 0,
    "elevation": 137.0,
    "hourly_units": {
        "time": "iso8601",
        "temperature_2m": "°C"
    },
    "hourly": {
        "time": [
            "2022-08-03T00:00",
            "2022-08-03T01:00",
            "2022-08-03T02:00",
            ...
        ],
        "temperature_2m": [
            24.7,
            24.3,
            23.9,
            ...
        ]
    }
}

Let's get into coding!

HTML

Let us start with the HTML of our website. As always, we use the default scaffolding that can be expanded in VS-code with the emmet abbreviation !.

In the head, we import our stylesheet.

<link  rel="stylesheet"  href="style.css">

In our body, we have two div elements and the script tag for the js of the website. The first div holds the header and the select element for the choosable cities, and the other contains the SVG and the link to the API.

<div class="header-container">
     <div class="header">
         ...
     </div>
 </div>

 <div class="container graph-container">
     <svg height="400" id="graph-svg">
        ...
     </svg>

     <div>
         <a href="https://open-meteo.com" target="_blank">Weather Data Provided By Open-Meteo</a>
     </div>
 </div>

 <script src="app.js"></script>

Inside the header, we set an h1 and a select element. Each option represents a location; therefore, we give each of them a custom data-lon and data-lat attribute, which are the coordinates of the given area. We later access these attributes in the JS code.

    <h1>Weather App</h1>

    <div>
        <span>Choose Location: </span>
        <select name="" class="countrySelect">
            <option value="Berlin" selected data-lat="52.5235" data-lon="13.4115">Berlin</option>
            <option value="Paris" data-lat="48.8567" data-lon="2.3510">Paris</option>
            <option value="London" data-lat="51.5002" data-lon="-0.1262">London</option>
            <option value="Madrid" data-lat="40.4167" data-lon="-3.7033">Madrid</option>
            ...
        </select>
     </div>

Inside the svg element, we first make a gradient texture that can be later used in visible SVG elements. Then we add two SVG groups with the element g. The first one holds all the labels and the second one the graph itself. We will insert the other SVG that's through the JS code.

<defs>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#5591c2  ;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#5591c2  ;stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:rgba(44, 44, 44, 0);stop-opacity:0" />
  </linearGradient>
</defs>

<g class="lables"></g>
<g class="data"></g>

Now we add the functionalities with JavaScript!

JavaScript

Let's get to the JS of the Program. We must remember that we must redraw the graph every time the window resizes or when the user changes the location.

Setup

Let's setup up some variables. The first one currentData acts just as a cache, so we don't have to get the data each time the window resizes. The following three constants are used for the styling of the graph and the labels. We need to add a little padding to the left inside the SVG element because our temperature scale will be there. We also exaggerate the temperatures, so they have a more apparent difference. And we also define how far apart each step on the temperature scale is.

let currentData = {}

const paddingLeftGraph = 60
const height_exxagaration = 7
const LabelStepsY = 5

After that, we save some of the needed elements in variables. For this we use querySelector and getElementById. continuing, we get the dimensions of the SVG element minus the padding; this is important so the graph will span the full width of the container. Last but not least, we define a step multiplier. This value will be used in tandem with the width.

The API will always return 168 Datapoints, but it may be that the SVG is 500 Pixels wide, and we want each of the Datapoints evenly spread out in these 500 Pixels. These last three variables will always be overwritten when the window size changes.

const dataContainer = document.querySelector('.data')
const lableContainer = document.querySelector('.lables')
const citySelect = document.querySelector('.countrySelect')
const svgElement = document.getElementById('graph-svg')

let container_width = svgElement.getBoundingClientRect().width - paddingLeftGraph
let container_height = svgElement.getBoundingClientRect().height
let step_multiplier = container_width / 168

Functions

Let us go over the function used on our website.

The first one is pretty simple. It will just fetch a provided URL and return the parsed json.

async function request(url) {
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

The next one is also simple as it will just set the new width and step multiplier and redraw the data and labels as soon as the window size changes.

function setSize() {
    let size = svgElement.getBoundingClientRect()

    container_width = size.width - paddingLeftGraph
    step_multiplier = container_width / 168

    DrawData()
    drawLables()
}

The getWeekDay function will return the name of the weekday from a given date.

function getWeekDay(date) {
    let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    return days[date.getDay()];
}

The changeLocation function will first get the option element where the value is the same as the select itself. This returned element has the data-lon and data-lat attributes which we will get from it using getAttribute(). After that we build the request string where insert these coordinates and we call the request() function. As soon as the request is finished we set the currentData variable to the returned data and we redraw the graph with DrawData()

function changeLocation() {    

    let currentCityEl = citySelect.querySelector(`[value="${citySelect.value}"]`)

    let lat = currentCityEl.getAttribute('data-lat')
    let lon = currentCityEl.getAttribute('data-lon')

    let requestString = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&hourly=temperature_2m`

    request(requestString).then((data) => {
        currentData = data
        DrawData(currentData)
    })

}

Now let us get to the DrawData() function. We start by making a string in which we build a polygon element. The thing about SVG polygons is that they always have to be closed, that is why we insert the positions of the start and end. We also add a placeholder INSERT_POINTS which will later be replaced with the points of the temperatures. When making the start and end point we take the padding into account.

Then we define three variables one will hold the concatenated string of all the points and the other hold the hourly temperatures we got from the request. The last one will be the x index position.

Then we loop over the hourly temperatures and we add the temperature and index to the points. We have to keep in mind the step multiplier and that the coordinates in a polygon start at the top left of the SVG element. Last but not least we insert the points string we just made into the string we made in the first place and we set it to be the inner HTML of the dataContainer which is a group in our SVG.

function DrawData() {
    let poly = `<polygon fill="url(#gradient)" points="${paddingLeftGraph},${container_height} INSERT_POINTS ${container_width + paddingLeftGraph},${container_height}"></polygon>`
    let positions = ''

    const temps = currentData.hourly.temperature_2m

    let index = 0
    temps.forEach(temperature => {
        positions = positions + ` ${index * step_multiplier + paddingLeftGraph},${container_height - temperature * height_exxagaration}`

        index++
    })

    poly = poly.replace('INSERT_POINTS', positions)

    dataContainer.innerHTML = poly
}

Let's all so go over the drawLables function. We do it pretty similar here, we build a string of text and line elements and we set them to be the inner HTML of the lableContainer. We make a loop where we count by our LabelStepsY variable. We do this for the X and Y axis. For the horizontal axis, we insert the weekdays but we set today and tomorrow.

function drawLables() {

    let verticalLinesString = ''
    for (let index = 0; index < 50; index += LabelStepsY) {
        let height = container_height - index * height_exxagaration
        verticalLinesString = verticalLinesString + `<line x1="0" y1="${height}" x2="1000" y2="${height}" class="line" /><text x="0" y="${height}">${index} °C</text>`
    }

    let dayIndex = 0
    for (let index = 0; index < 169; index += 24) {

        let daytext
        if (dayIndex == 0) {
            daytext = 'Today'
        }
        else if (dayIndex == 1) {
            daytext = 'Tomorrow'
        }
        else {
            var date = new Date();
            date.setDate(date.getDate() + dayIndex);

            daytext = getWeekDay(date)
        }

        let width = index * step_multiplier + paddingLeftGraph
        verticalLinesString = verticalLinesString + `<line x1="${width}" y1="50" x2="${width}" y2="1000" class="line"/><text x="${width}" y="${container_height - 5}">${daytext}</text>`

        dayIndex++
    }

    lableContainer.innerHTML = verticalLinesString
}

Connecting Events

After making the functions we connect the change event from the selection to the changeLocation function and the resize event from the document to setSize. Last but not least we call changeLocation and drawLables so the graph is drawn for the firs time after the page loads.

citySelect.addEventListener('change', changeLocation)
window.addEventListener('resize', setSize, false);

changeLocation()
drawLables()

CSS / SASS

Our Web App will now work but it won't look good, so let's add some styling to it!

In the sass file, we first add four variables that hold the color palette and we define a mixin which is a reusable component that we can later include anywhere with @include container.

$color: #3e6b8f    
$bg: rgb(65, 65, 65)
$lines: rgb(90, 90, 90)
$text: #f3f3f3

@mixin container()
    max-width: 900px
    margin: 0 auto
    padding: 1em

After that, we style the body by setting the font and color. We also make a class container that solely consists of the mixin.

body
    box-sizing: border-box
    font-family: 'Segoe UI', sans-serif
    margin: 0
    background-color: $bg
    color: $text


.container
    @include container

Then we make the header, where we also use the mixin

.header-container

    background-color: $color
    border-bottom: 6px solid darken($color, 5)

    .header
        @include container
        padding: 1em
        display: flex
        justify-content: space-between
        align-items: center

    h1
        margin: 0

continuing we style the SVG to be full width and we set the outline color of the lines with the stroke property and the color of the text with fill. Last but not least we style the link and we use the lighten function that will as its name suggests lighten the color by the amount given as a second argument.

.graph-container
    margin-top: 1em

    svg
        width: 100%

        .line
            stroke: $lines

        text
            fill: $text

a
    color: lighten($color, 20)
    text-decoration: none
    padding: 0.5em
    display: block
    text-align: center

Showcase

Below you see the Website in action.

GIF

Weather App (maximmaeder.com)
GitHub

Conclusion

Excellent! You have successfully created a Weather using Web Technologies! See how you can add more features to this program, such as rain prediction or custom locations.

Attribution

Open Meteo
Licenceand try to solve problems your way!

Highlighted Dummy Code Editor with HTML CSS JavaScript (vue.js)

Maxim Maeder — Mon, 12 Sep 2022 18:32:33 +0000

Original Post

Learn about HTML, CSS, JavaScript (vue.js), and Regular Expressions by creating a dummy code editor that looks like VS-Code

Idea

Today we will create a dummy code editor that supports syntax highlighting. We use HTML, CSS and JavaScript (Vue.js). We are also going to learn about RegularExpressions for the highlighting. Below you see the Editor already in action, so you better understand what we will do.

You find the Live Demo here.

HTML

We start with the HTML of the Editor. We use the standard scaffolding of HTML, which can be made in VS-Code with the emmet abbreviation !.

At the Head of the page, we set a title that will appear in the browser tab, import the style sheet, and get vue.js via a Content Delivery System, so we don't have to set up a project. However, it is not advised to do that since there could be loading times when the CDN servers receive many requests simultaneously.

<title>Highlighted Dummy Code Editor</title>

<link rel="stylesheet" href="style.css">

<script src="https://unpkg.com/vue@3"></script>

Now inside the body, we add a div with the id app, which will be our app. Then inside, we have two divs. One represents the menubar at the top, and the other holds the Editor. We won't go into detail in the menubar as it just contains buttons like File, Edit, Help.

<div id="app">
    <div class="menubar">
        ....
    </div>

    <div class="editor-container">
        ....
    </div>
</div>

Now inside the editor container, we once again have two divs. The first one will be holding the line numbers. In it, we duplicate a span element with a ranged loop. The range is determined by the line count of the content which will hold the input.

Then for the Editor itself, we insert a div and a textarea We do it this way because the user can only edit the text area, but it cant display HTML. That's why we need the div. We insert the converted as HTML into it with the v-html directive, and we bind the content value to the textarea with the v-model directive. The content will be parsed and extended with syntax highlighting before being inserted into the div.

<div class="linenumbers">
    <span v-for="n in content.split('\n').length">{{ n }} <br> </span>
</div>
<div class="editor">
    <div class="display" id="textarea" v-html="convert()"></div>
    <textarea v-model="content"></textarea>
</div>

With CSS, we will make it, so the textarea and div are overlaid onto each other, so the user does not notice that he is not editing only one area but two.

Now let's add some functionality with JavaScript!

JavaScript

Setup

We have imported vue.js. Now we get the createApp function. After that, we also set a starting String that is not shown here in total, containing some python code.

const { createApp } = Vue

var startingString = `from argparse import ArgumentParser
...`

Then we call that function and set up our starting string to be the content variable in the vue.js object. The user is editing this value. We have already seen how this value is handled in the HTML. We also define a method convert() that we use to convert the content to HTML. In the next part, we examine how this function is made up. Last but not least, we mount the app on our div with the id #app.

createApp({
    data() {
        return {
            content: startingString
        }
    },
    methods: {
        convert() {
            ...
        }
    }
}).mount('#app')

Highlight the Code using Regular Expressions

Now, let us highlight some code! In the convert function of our vue app, we start by saving the content variable to the parsed variable.

var parsed = this.content

Then we define many regex patterns being replaced with the RegExp object. But what do these mean? Let's look at the first two patterns meant for strings with " and '. All regex patterns look like this: /pattern/modifier where the modifier is almost always g, which means that all patterns are matched. It is also possible to tell it to match case insensitive. The pattern part starts with ", which means itself, but then we continue with (.*?). Here the parentheses group this part of the pattern. The dot . means to match any character. And the * modifies the character in front of it so it can appear zero to infinite times, so any number of characters, but the ? tells it to be lazy. We conclude with another ". Lazy means it will try to match as few characters as possible. Example: "Hey" hola() "Goodbye". It should have two matches because there is a function in the middle. With our lazy modifier, it would match the whole string. The commentWordPattern is pretty similar. The keyWordPattern is also easy as the | means a match that or this word/character.

/* Patterns */
var stringPattern1 = new RegExp(/"(.*?)"/g)
var stringPattern2 = new RegExp(/'(.*?)'/g)
var keyWordPattern = new RegExp(/\b(False|None|True|and|as|assert|async|await|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield)\b/g)
var commentWordPattern = new RegExp(/(#.*)/g)
var functionWordPattern = new RegExp(/([a-zA-Z_]*)(\(.*\))/g)
var numberWordPattern = new RegExp(/(\d)/g)

Now we also need to change our content according to the patterns. Here the grouping plays a big role because we can insert that group into the replacement with the $1 placeholder. Nine groups can be inserted with $1 to $9. So we use string.replace(pattern, replacement). We replace each type with its content but wrapped in a span element with a custom attribute, which we later use to style strings, keywords, comments, and functions.

parsed = parsed.replace(stringPattern1, '<span str>"$1"</span>')
parsed = parsed.replace(stringPattern2, '<span str>\'$1\'</span>')
parsed = parsed.replace(keyWordPattern, '<span kw>$1</span>')
parsed = parsed.replace(commentWordPattern, '<span com>$1</span>')
parsed = parsed.replace(functionWordPattern, '<span func>$1</span>$2')
parsed = parsed.replace(numberWordPattern, '<span num>$1</span>')

Last but not least, we return the parsed HTML so it can be used with the v-html directive.

return parsed

Now the application should work. But it does not look good, so we add some CSS!

CSS

Setup

Let's start by setting box-sizing to border-box because it will make it easier to work with paddings. Then we select a dark background color and make it, so the body is one hundred percent of the viewport height high. And we remove the margins of everything.

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background-color: RGB(42, 42, 42) !important;
    height: 100vh
}

After that, we make a class for the menu bar we defined earlier in the HTML. We set it to display: flex so the items are side by side, and we also make it stick to the top with position: sticky and top: 0. We also set the z-index to anything greater than one. We also style the buttons in the menubar in their usual and hovered states. This ensures that the menubar is in front of the code at all times.

.menubar {
    background-color: RGB(54, 54, 54) !important;
    padding-left: 1em;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.menubar button {
    padding: 0.7em 0.7em;
    background-color: transparent;
    color: RGB(175, 175, 175);
    border: none;
}

.menubar button:hover {
    background-color: RGB(66, 66, 66);
    cursor: pointer;
}

Editor

Now let us get to the Editor. We first set the container's display to the grid and two columns. One is 50px in width, and the other fills the rest of the available space using 1fr. The 50 Pixel column will hold the line numbers.

.editor-container {
    display: grid;
    grid-template-columns: 50px 1fr
}

.linenumbers {
    color: rgb(109, 109, 109);
    font-size: 1.3em;
    font-family: monospace !important;
    padding: 1em 0.1em;
    text-align: right;
}

.linenumbers span {
    width: 100% !important;
}

In the .display area and the textarea, we set the height to 100% and the resize to none, so the textarea stays the same. Then, set the position to absolute, so the elements break out the flow. This will cause them to go to the top left of their container, essentially overlaying each other.

.display,
textarea {
    padding: 1em;
    font-size: 1.3em;
    font-family: monospace !important;
    height: 100%;
    outline: none;
    border: 0px solid black;
    width: 100%;
    resize: none;
    position: absolute;
    margin: 0;
    background: transparent;
    padding-left: 1em;
    overflow-x: auto;
}

Now we set the color of the text area to be transparent. But this will cause the caret to be invisible, so we have to set its color once again. For the display, we set a color and the white-space property to pre-wrap so the white spaces prevail.

textarea {
    color: rgba(0, 0, 0, 0);
    caret-color: aliceblue;
}

.display {
    color: rgb(216, 216, 216);
    white-space: pre-wrap;
}

Last but not least, we set the height of the container to 100 percent the position to relative.

.editor {
    height: 100%;
    position: relative;
    flex-grow: 1;
}

Highlights

Now for the syntax highlighting, we simply color elements that have the attributes we have provided.

[kw] {
    color: RGB(234, 97, 97);
}

[num] {
    color: #d8fff6;
}

[func] {
    color: rgb(95, 211, 234);
}

[str],
[str] * {
    color: rgb(234, 162, 95) !important;
}

[com],
[com] * {
    color: rgb(95, 234, 165) !important;
}

Showcase

Let's look at the app in action.

Gif

You find the Live Demo here.
You find the GitHub Repo here.

Conclusion

Excellent! You have successfully created a Dummy using Python code! See how you can add more features to this program, such as different languages.

GitHub

Simple spreadsheet app with vue

Maxim Maeder — Mon, 12 Sep 2022 16:49:44 +0000

Original Post

In this tutorial, we will make a simple spreadsheet app consisting of a large empty table that we can fill with values. We can also use this syntax =expression to allow for more complex interactions, and we all make it so these fields can refer to other fields' values so that it will be a little bit like excl. I split this Tutorial into four parts; HTML, Javascript & CSS codes, and the program showcase, where you can try it out in an Iframe. We use the js framework vue.js.

Let us get into making something extraordinary!

HTML Code

So let us start with the HTML of the site. You can copy the Framework below.

<!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">
    <title>Document</title>
</head>

<body>

</body>

</html>

Now for vue.js to work, we have to integrate it somehow. We could create a project with it, but for now, we load it through a Content Delivery Network (CDN). So we add the code below to our page's head.

<!-- Add vue via cdn -->
<script  src="https://unpkg.com/vue@3"></script>

Our spreadsheet app will be bare, so we don't have any fancy UI, just the table. So we create a div and then in it the table. We give the div an id so we can later mount the vue app on it.

<div  id="app">
    <table>

In the table, we start with the head, which will be the letters of the columns. We insert an empty header cell because the first column will consist of the row numbers. After that, we can use the v-for="item in list" directive to copy this element and all its children. Inside the element, we can also use the item or how ever we called it with curly brackets like this {{ item }}.

   <thead class="sticky-top">
       <th></th>
       <th v-for="char in chars">{{char}}</th>
   </thead>

After setting up the top row, we start making the rows. We use the v-for directive again, but we do it this way v-for="(item, index) in list". We do this to get the item's index and the item itself. This is like doing this in python. for I, item in enumerate(list):. Then we use this index for the first column of this row, which will also be a head because it will show the row number.

<tr v-for="(layer, index) in cellsLayered">
    <!-- First cell, which is the index / row number -->
    <th class="sticky-left">{{index}}</th>

Continuing, we start another loop for the cells in this row, called layer in this example. We then make an input bound to the cell's value at cell+index. Later in the JS part, we learn why we do it this way.

<!-- Display the cells -->
<td v-for="cell in layer">

    <!-- Insert input with v-model for binding -->
    <input v-model="cells[cell+index]" type="text">

Then we either show the value of the cell here, or we call the evaluation() function we make later to evaluate whatever is in the cell. We check with the v-if and v-else directives.

    <!-- Insert either a div that shows the value or a div that evalates the value -->
    <div>
        <div v-if="!cells[cell+index].startsWith('=')">
            {{ cells[cell+index] }}
        </div>
        <div v-else class="eval">
            {{ evaluation(cells[cell+index]) }}
        </div>
    </div>
   </td>
  </tr>
 </table>
</div>

Now we have the HTML. Let us go over the JavaScript.

JavaScript Code

Let us now add some functionality to our code with the js framework vue.js. We have already imported it in the head tag using a CDN.

So lets start by getting the createApp function from vue.

const { createApp } = Vue

We continue by defining the letters the table has at the top row. In excl, after the z, it begins with aa, but we are just sticking with the alphabet.

/* Define The list */
var chars = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

After that we define two variables. The cells Object will hold all the cells; the keys will look like this. a0, b6 and x10. We also see this in excl. We also make a list called cellsLayered which will hold one list/array for each layer, so it is easier to draw as you saw in the HTML part.

/* We are making this variables outside, but we will insert it into vue */
var cells = {}
var cellsLayered = []

Now we need to populate these variables with values. So we start a loop which happens 30 times. Inside it, we define a layer variable, which, as it says, will hold the current layer of cells. Then we also loop through the character we specified earlier. We fill the cells object with empty strings, which will be inserted into the HTML. Then we also push the character to the layer. After the character loop, we push the layer to the cellLayered list.

for (let number = 0; number < 30; number++) {
    var layer = []

    chars.forEach(character => {
        cells[character + number] = ''
        layer.push(character)
    });

    cellsLayered.push(layer)
}

We insert some starting values at some positions.

/* Some Starting Values */
cells['a0'] = '10'
cells['a1'] = '20'
cells['b2'] = '=30'
cells['b3'] = '=a0'

Now we can finally create the app. In its data function, we return some of the lists and objects we made, so they are available in the HTML.

createApp({
    data() {
        return {
            chars: chars,
            cells: cells,
            cellsLayered: cellsLayered
        }
    },

Now we also define a custom method, the evaluation() we have used in the HTML. This will insert the values from other cells into this cell and evaluate the expression. We first remove the = from the string by slicing it. Then we loop over the keys of the cell's object and check if the key string appears in the cell string.

If that is the case, we replace this appearance with the evaluated value of the respective cell by splitting and joining the string. Calling the function recursively allows us to have references to cells that already have connections. After that, we try to evaluate the string, or we return the error code, so this appears in the cell.

methods: {
   evaluation(string) {

       if (string.startsWith('=')) {    
            string = string.slice(1, string.length) 
        }


       Object.keys(cells).forEach(coord => {
           if (string.includes(coord)) {
               string = string.split(coord).join(this.evaluation(cells[coord]))
           }
       })

       try {
           return eval(string)
       } catch (error) {
           return error
       }
   }
}
}).mount('#app')

Don't forget to call the mount(id) function to assign the vue app to our div at the specified id.

Let us look at our app in action.

Showcase Gif of the spreadsheet

It works! But it does not look nice. Let us style it with CSS!

CSS Code

We insert the CSS code into the head of the file.

We simply start by removing the margin around the body, setting the font to any monospace type and setting everythings box sizing to border-box

/* CSS Setup */
body {
    margin: 0
}

* {
    font-family: monospace !important;
    box-sizing: border-box;
}

After that, we remove the spacing between the table cells by setting border-spacing to 0.

/* Remove Spacing between cells */
table {
    border-spacing: 0;
}

We continue by giving the cells some styling. First, we select both types td and th but then apply some individual styling.

/* Styling the Cells */
td,
th {
    min-width: 70px;
    min-height: 40px;
    padding: 0.2em;
    border-right: 1px solid rgb(209, 209, 209);
    border-bottom: 1px solid rgb(209, 209, 209);
}

th {
    background-color: rgb(229, 229, 229);
}

td {
    background-color: whitesmoke;
    padding: 1em;
    text-align: center;
    position: relative;
}

Now to the hard part. We want the input only visible when the user hovers over it or when he is writing and vice versa for the label, which shows the evaluated value of the cell. So we select both cases and ad +div add the end, which means the first div after an input. So this will hide the label in these cases.

/* Toggle Input and Display */

/* Hide Label if input is focused or hovered */
td:hover input+div,
td input:focus+div {
    display: none
}

Styling the input and labels, setting them to full width and height, so they fill the cell.

/* Expand input and label to full size of container */
td>input,
td div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
}

For the input to receive the hover from the mouse, we need to set pointer-events to none for the divs/labels which show the value.

/* Make Label see through for mouse */
td>div {
    pointer-events: none;
}

Let us finish up the complicated part by setting the input to hidden by default and showing it as soon as its parent cell is hovered over or when it is in focus.

/* Hide Input by default */
td input {
    visibility: hidden;
}

/* Show Input if focus or hover is true */
td:hover input,
td input:focus {
    visibility: visible;
}

Now for some custom classes. The eval class is just used for cells that are evaluated. The sticky-top and sticky-left do what they say. They stick to the top and left sides of the screen. We apply these to the headers of our tables so they are always visible.

/* Classes */

/* Cells that are evaluated */
.eval {
    background-color: rgb(207, 255, 221)
}

/* Top Row */
.sticky-top {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    box-shadow: 0 1px 3px rgb(180, 180, 180)
}

/* Left Column */
.sticky-left {
    position: sticky;
    left: 0;
    z-index: 98;
}

Showcase

So that's it. Let us look at our little app.

Showcase

Conclusion

Excellent! You have successfully created a Simple spreadsheet app using HTML / CSS / Javascript and Vue.js! See how you can add more features to this program, such as functions like sum or saving and opening.

Full Code

<!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">
    <title>simple spreadsheet app with vue</title>

    <!-- Add vue via cdn -->
    <script src="https://unpkg.com/vue@3"></script>

    <style>
/* CSS Setup */
body {
    margin: 0
}

* {
    font-family: monospace !important;
    box-sizing: border-box;
}

/* Remove Spacing between cells */
table {
    border-spacing: 0;
}

/* Styling the Cells */
td,
th {
    min-width: 70px;
    min-height: 40px;
    padding: 0.2em;
    border-right: 1px solid rgb(209, 209, 209);
    border-bottom: 1px solid rgb(209, 209, 209);
}

th {
    background-color: rgb(229, 229, 229);
}

td {
    background-color: whitesmoke;
    padding: 1em;
    text-align: center;
    position: relative;
}


/* Toggle Input and Display */

/* Hide Label if input is focused or hovered */
td:hover input+div,
td input:focus+div {
    display: none
}

/* Expand input and label to full size of container */
td>input,
td div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 0px;
}

/* Make Label see through for mouse */
td>div {
    pointer-events: none;
}

/* Hide Input by default */
td input {
    visibility: hidden;
}

/* Show Input if focus or hover is true */
td:hover input,
td input:focus {
    visibility: visible;
    outline: none;
}


/* Classes */

/* Cells that are evaluated */
.eval {
    background-color: rgb(207, 255, 221)
}

/* Top Row */
.sticky-top {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    box-shadow: 0 1px 3px rgb(180, 180, 180)
}

/* Left Column */
.sticky-left {
    position: sticky;
    left: 0;
    z-index: 98;
}
    </style>

</head>

<body>

    <div id="app">

        <table>
            <thead class="sticky-top">
                <th></th>
                <th v-for="char in chars">{{char}}</th>
            </thead>
            <tr v-for="(layer, index) in cellsLayered">

                <!-- First cell, which is the index / row number -->
                <th class="sticky-left">{{index}}</th>

                <!-- Display the cells -->
                <td v-for="cell in layer">

                    <!-- Insert input with v-model for binding -->
                    <input v-model="cells[cell+index]" type="text">

                    <!-- Insert either a div that shows the value or a div that evalates the value -->
                    <div>
                        <div v-if="!cells[cell+index].startsWith('=')">
                            {{ cells[cell+index] }}
                        </div>
                        <div v-else class="eval">
                            {{ evaluation(cells[cell+index]) }}
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <script>
        console.log(eval("1"))

        const { createApp } = Vue

        /* Define The list */
        var chars = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

        /* We are making this variables outside, but we will insert it into vue */
        var cells = {}
        var cellsLayered = []

        for (let number = 0; number < 30; number++) {
            var layer = []

            chars.forEach(character => {
                cells[character + number] = ''
                layer.push(character)
            });

            cellsLayered.push(layer)
        }

        /* Some Starting Values */
        cells['a0'] = '10'
        cells['a1'] = '20'
        cells['b2'] = '=30'
        cells['b3'] = '=a0'

        createApp({
            data() {
                return {
                    chars: chars,
                    cells: cells,
                    cellsLayered: cellsLayered
                }
            },
            methods: {
                evaluation(string) {

                    if (string.startsWith('=')) {
                        string = string.slice(1, string.length)
                    }


                    Object.keys(cells).forEach(coord => {
                        if (string.includes(coord)) {

                            string = string.split(coord).join(this.evaluation(cells[coord]))
                        }
                    })

                    try {
                        return eval(string)
                    } catch (error) {
                        return error
                    }
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

DEV Community: Maxim Maeder

Programming Project Ideas

Recreating Famous Software or Famous UI Elements

Making Games

Packages and Languages

Make Notes of Things you Encounter

Infinite Scrolling Website with JavaScript

Markup of the infinite scrolling website

JavaScript

Observer Callback

addPicture Function

getPicture Function

Styling the infinite scrolling grid

Conclusion: Infinite Scrolling Website

Line Chart with Svelte

Line Chart Component

Script of the Line Chart Component

HTML of the Line Chart Component

CSS of the Line Chart Component

Using the Line Chart Component

Conclusion

Calculator with History Function in HTML, CSS, and JavaScript

Idea

HTML

JavaScript

Registrate Changes

Refresh History Function

CSS

Conclusion

Split Container Web Component

Idea

Class

Connected Function

Shadow DOM and Templates

Movement Callback

CSS

HTMl Usage

Showcase

Conclusion

Tabs with HTML, SASS, and JS

Idea

HTML of the Tabs

JavaScript of the Tabs

Sass of the Tabs

Showcase

Conclusion

Display JSON with HTML, CSS, and Javascript

Idea

JavaScript Code

Arguments

Setting up the Highest Root Element

Looping over the Properties

Showing Primitives

Showing Objects

CSS Code

Showcase

Conclusion

Padding and Margin Classes with Sass

Conclusion

Full Code

Weather App with HTML, SASS, and JavaScript

Idea

SVG

API

HTML

JavaScript

Setup

Functions

Connecting Events

CSS / SASS

Showcase

Conclusion

Attribution

Highlighted Dummy Code Editor with HTML CSS JavaScript (vue.js)

Idea

HTML

JavaScript

Setup

Highlight the Code using Regular Expressions

CSS

`addPicture` Function

`getPicture` Function