Codism is a Codepen inspired coding playgound that lets you add and modify HTML, CSS and JavaScript

Overview

Codism

Codism is a Codepen inspired coding playgound that lets you add and modify HTML, CSS and JavaScript to create in order to create cool stuff! You'll definitely find it handy if you just want to code something without needing to go create files and folders that end up being a mess.

Fast & Robust

At this point, we're compiling everything, right inside the browser which makes the response super fast! You type something and as soon as you stop typing we update the view. This helps us keep things optimized, yet at the same time, fast and robust.

Motivation

I'd like to make something clear. I've not created this in order to rival platforms like Codepen etc. I've created this project purely for learning purposes. I've been interested in how online platforms like Codepen, Hackerrank, Leetcode and Algoexpert works and I've learned a lot since I started doing research and decided to go with this project.

Development

You can fork this repo, clone it and what not. Simply run npm install to install the packages and then run npm start to start up the development server. This should also open up a browser for you with HMR etc working out of the box.

Production

Run npm run build to create an optimized build and npm run serve to serve the build files in your browser.

You might also like...

In this project, I built a basic website that allows users to add/remove books from a list using HTML/CSS to build the app and JavaScript to add functionalities. This project was organized using modules and ES6 syntax implemented.

Awesome books: with ES6 Description the project. Built With HTML CSS JAVASCRIPT Live Demo (if available) Live Demo Link Getting Started This is an exa

Sep 9, 2022

"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome Books Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Jan 28, 2022

To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. It is built with HTML, CSS and JavaScript

To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. It is built with HTML, CSS and JavaScript

to do List To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. Built With HTML-5 CSS3 Ja

Jun 7, 2022

An event-driven architecture wrapper for Wechaty that applies the CQS principle by using separate Query and Command messages to retrieve and modify the bot state, respectively.

An event-driven architecture wrapper for Wechaty that applies the CQS principle by using separate Query and Command messages to retrieve and modify the bot state, respectively.

CQRS Wechaty An event-driven architecture wrapper for Wechaty that applies the CQS principle by using separate Query and Command messages to retrieve

Mar 23, 2022

A tool to modify onnx models in a visualization fashion, based on Netron and flask.

A tool to modify onnx models in a visualization fashion, based on Netron and flask.

English | 简体中文 Introduction To edit an ONNX model, One common way is to visualize the model graph, and edit it using ONNX Python API. This works fine.

Jan 4, 2023

Visualize, modify, and build your database with dbSpy! An open-source data modeling tool to facilitate relational database development.

Visualize, modify, and build your database with dbSpy! An open-source data modeling tool to facilitate relational database development.

Visualize, modify, and build your database with dbSpy! dbSpy is an open-source data modeling tool to facilitate relational database development. Key F

Dec 22, 2022

Modify Request & Response Headers Chrome Extension (Manifest V3)

Modify Request & Response Headers Chrome Extension (Manifest V3)

Modify request & response headers (Chrome Extension Manifest V3) This Chrome extension will add request header and response header to few network requ

Dec 9, 2022

A to-do list Web application that lets the user add, remove and reorder to do lists and checks a task when completed with a button to delete all completed task

TO DO LISTS A Web application that lets the user add, remove and reorder to do lists Built With Html,JS,CSS Webpack and other dependencies Git, Github

Nov 1, 2022

Unread-Messages.js is a lightweight library that lets a user add floating number notifications to any object.

Unread-Messages.js is a lightweight library that lets a user add floating number notifications to any object.

Unread-Messages.js About Unread-Messages.js is a lightweight library that lets a user add mobile-like notification counter badge to any object with ju

Dec 18, 2021
Owner
Muhammad Hasnain
Love 2 Code ❤
Muhammad Hasnain
To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
Data structures & algorithms implementations and coding problem solutions. Written in Typescript and tested with Jest. Coding problems are pulled from LeetCode and Daily Coding Problem.

technical-interview-prep Data structures & algorithms implementations and coding problem solutions. Written in Typescript and tested with Jest. Coding

Lesley Chang 7 Aug 5, 2022
A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
This project will be a basic website that allows users to add/remove books from a list. The main objective is to understand how to use JavaScript objects and arrays and dynamically modify the DOM and add basic events.

Awesome-books Awesome Books This project will be a basic website that allows users to add/remove books from a list. This project is part of the Microv

Aleksandra Ujvari 10 Oct 3, 2022
Rotating CSS dice in 3D using jQuery. Based on my old snippet on CodePen.

Dice Rotating CSS dice in 3D using jQuery. Based on my old CodePen Roll the dice!. Demo: https://alexerlandsson.github.io/dice/ How to use Include /do

Alexander Erlandsson 6 Dec 14, 2022
This is a basic app that allows user add/remove books from a list of books. It was created by using JavaScript arrays and objects to dynamically modify the DOM.

Awesome-Books This application lets you compile a dynamic collection of books using JavaScript. It is a single page app. You enter your book title & a

Jules Edozie 7 Oct 24, 2022
Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Twitter.

news.ycombinator1.com Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Dis

Ian Langworth ☠ 38 Sep 18, 2022
A simple task manager that allows that allows users to add, remove and modify tasks from a list.

TO-DO LIST TO-DO LIST is a basic app that allows users to add/remove task from a to-do list. Built With HTML, CSS, JavaScript, Live Demo Live Demo Lin

Shingirai Bhengesa 3 May 3, 2022
✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo ?? https://jsfiddle.net/torrobin

Tor 7 Jul 31, 2022
A Zotero add-on that scans your Markdown reading notes, tags the associated Zotero items, and lets you open notes for the Zotero items in Obsidian.

Zotero Obsidian Citations Adds colored tags to Zotero items that have associated Markdown notes stored in an external folder. Open an associated Markd

Dae 210 Jan 4, 2023