JSFiddle - React, Tailwind, and code Playground

by lukempeters

CSS

body {
    margin: 40px 50px;
    font-family: Tahoma, Arial;
    font-size: 14px;
    color: #3b3b3b;
    background: #f6f6f6;
}

h3 {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 100;
}    

strong {
    font-weight: bold;
}

JavaScript

// DEFINE THE OBJECT
var Luke = {
    name: 'Luke',
    age: 24,
    location: 'Cambridge, MA',
    memories: [{
        title: 'Posting art on Deviantart.com',
        story: 'I remember back in the early 2000\'s, posting my art up on Deviantart.com. I was completely wrapped up in the digital art world back then. It was a great time filled with inspiration, education and the founding of my skills in web development.'
    },
    {
        title: 'Learning CSS',
        story: 'Man, I remember when I first started learning CSS. Before this moment, I had done all of my styling in Photoshop, with images and HTML tables. I loved the fact that I could just open up Notepad and design an entire site. So cool.'
    }]
};

// Here's a method (something the object can DO
Luke.ageTenYears = function()
{
    Luke.age += 10;
};


Luke.getMemories = function()
{
    var memoriesHtml = '<h3>Memories</h3>';
    
    for(memory in Luke.memories)
    {
        memory = Luke.memories[memory];
        
        memoriesHtml += '<strong>' + memory.title + '</strong><br>' + memory.story + '<br><br>';
    }
    
    $('body').append(memoriesHtml);
};


// DO STUFF WITH THE OBJECT

// Spit out one of the object's properties (like it's Name value, Age value and Location value)
$('body').append('<h3>Basic Introduction</h3>Hello, my name is ' + Luke.name + '.<br>I am ' + Luke.age + ' years old<br>I live in ' + Luke.location + '.');


// Now that we've spit out some of the Luke objects properties, how about we run it's method 'ageTenYears' and see what the object's new age is?
Luke.ageTenYears();
$('body').append('<br><br>Luke just aged! He is now ' + Luke.age + ' years old!<br><br>');


// Let's run the ''getMemories' function!
Luke.getMemories();